JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法


Posted in Javascript onJune 19, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

// 上传目标触发点 
<input type="file" class="upvideo" name="upvideo" id="fileupload1" /> 
// 引入插件 
<script type="text/javascript" src="{$IMG}/bstage/js/jquery.form.js" language="javascript"></script> 
/**方法调用**/ 
setFileUpload({ 
 name: 'fileupload1',  
 backfun: upback1,  
 beforefun: checkUp1, 
 loadfun:loadup, 
 phpUrl: '/ossphp/php/get.php?ft=video' 
}); 
// 上传前验证 
function checkUp1(n){ 
 // 查看视频大小(mb) 
 var fileObj = document.getElementById(n).files[0]; 
 var relSize = parseInt(fileObj.size/1024/1024); 
 if(relSize > 10){ // 大于10mb 
  alert('提示','视屏超过10MB,请重新上传!'); 
  return false; 
 } 
 // 查看视频类型 
 var tv_id =document.getElementById(n).value;//根据id得到值 
 var index= tv_id.indexOf("."); 
 tv_id=tv_id.substring(index).toLowerCase(); 
 if(tv_id!=".rb"&&tv_id!=".rmvb"&&tv_id!=".mp4"&&tv_id!=".flv"){ 
  alert("提示","不是指定视频格式,重新选择"); 
  return false; 
 } 
 return true; 
} 
//上传中 
function loadup(){ 
} 
// 上传成功后操作 
function upback1(data){   
 // data 成功后的参数 
}  
/**上传功能封装**/ 
function setFileUpload(options){ 
 var n = options.name; 
 var phpUrl = options.phpUrl; 
 var backfun = options.backfun; 
 var beforefun = options.beforefun; 
 var loadfun = options.loadfun;  
 var accessid = ''; 
 var accesskey = ''; 
 var host = ''; 
 var policyBase64 = ''; 
 var signature = ''; 
 var callbackbody = ''; 
 var filename = ''; 
 var dirname = ''; 
 var expire = 0; 
 var upflag = true; 
 if(phpUrl==null || phpUrl==''){console.log('phpurl is null');return false;} 
 if(n==null || n==''){console.log('object is null');return false;} 
 var backfun1 = $.isFunction(backfun) ? 
      backfun : 
      function(success, error){ 
       console.log('no backfun'); 
      }; 
 var beforefun1 = $.isFunction(beforefun) ? 
      beforefun : 
      function(success, error){ 
       return true; 
      }; 
 var loadfun1 = $.isFunction(loadfun) ? 
      loadfun : 
      function(success, error){ 
       return true; 
      }; 
 var obj = $('#'+n); 
 obj.change(function(){ 
  if(beforefun1(n)){ 
   if(n=="fileupload1"){ 
    fileEmb1(n); 
   }else if(n == 'fileupload2'){ 
    fileEmb2(n); 
   }else if(n == 'fileupload3'){ 
    fileEmb3(n); 
   } 
  } 
 }); 
 function fileEmb1(n){ 
  //oss add 
  $("#"+n).attr('name','file'); 
  var file1 = $("#"+n).val();  
  var fileName = getFileName(file1); 
  phpUrl = phpUrl + '&fname='+fileName; 
  get_signature(); 
  var ldot = fileName.lastIndexOf("."); 
  var filetype = fileName.substring(ldot + 1); 
  $("#"+n).wrap("<form id='myupload1' action='"+host+"' method='post' enctype='multipart/form-data'></form>"); 
  $("#myupload1").prepend("<input type='hidden' value='' name='name' id='name'></input><input type='hidden' value='"+dirname+"."+filetype+"' name='key' ></input><input type='hidden' value='"+policyBase64+"' name='policy' id='policy'></input><input type='hidden' value='"+accessid+"' name='OSSAccessKeyId' id='OSSAccessKeyId'></input><input type='hidden' value='200' name='success_action_status' id='success_action_status' ></input><input type='hidden' value='"+callbackbody+"' name='callback' id='callback'></input><input type='hidden' value='"+signature+"' name='signature' id='signature'></input>"); 
  //speed_width进度条类 
  //percent进度数字类 
  //load_content上传区域 
  $('#myupload1').ajaxSubmit({ 
   dataType: 'json', //数据格式为json 
   data:'', 
   beforeSend: function() { 
    loadfun1(); 
    if(!upflag)return false; 
    upflag=false; 
   }, 
   uploadProgress: function(event, position, total, percentComplete) { 
    $('.upck_b').hide(); 
    $('.videspeed').show(); 
    percentComplete = percentComplete>=100?99:percentComplete; 
    var percentVal = percentComplete + '%'; //获得进度 
    $('.speed_num').css('width',percentVal); 
    $('.persent_em').html(percentComplete); 
   }, 
   success: function(data) { //成功 
     $('.load_content').html('<em >图片上传</em>'); 
     //上传成功后还原 
     $("#"+n).attr('name',''); 
     setFileUpload(options); 
     upflag=true; 
     backfun1(data); 
   }, 
   error:function(xhr){ //上传失败 
    $('.load_content').html('<em >图片上传</em>'); 
    upflag=true; 
   } 
  }); 
 } 
 function getFileName(path){ 
  var pos1 = path.lastIndexOf('/'); 
  var pos2 = path.lastIndexOf('\\'); 
  var pos = Math.max(pos1, pos2) 
  if( pos<0 ) 
   return path; 
  else 
   return path.substring(pos+1); 
 } 
 now = timestamp = Date.parse(new Date()) / 1000; 
 new_multipart_params = ''; 
 function send_request(){ 
  var xmlhttp = null; 
  if (window.XMLHttpRequest) 
  { 
   xmlhttp=new XMLHttpRequest(); 
  } 
  else if (window.ActiveXObject) 
  { 
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
  if (xmlhttp!=null && phpUrl) 
  { 
   //phpUrl = '/ossphp/php/get.php?ft=resources'; 
   xmlhttp.open( "GET", phpUrl, false ); 
   xmlhttp.send( null ); 
   return xmlhttp.responseText; 
  } 
  else 
  { 
   alert("Your browser does not support XMLHTTP."); 
  } 
 }; 
 function get_signature() 
 { 
  //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲 
  now = timestamp = Date.parse(new Date()) / 1000;  
  //if (expire < now + 3) 
  //{ 
   body = send_request() 
   var obj = eval ("(" + body + ")"); 
   host = obj['host'] 
   policyBase64 = obj['policy'] 
   accessid = obj['accessid'] 
   signature = obj['signature'] 
   expire = parseInt(obj['expire']) 
   callbackbody = obj['callback'] 
   dirname = obj['dir'] 
   return true; 
  //} 
 }; 
}

注:里面的细节还可以继续封装

以上所述是小编给大家介绍的JavaScript 上传文件(psd,压缩包等),图片,视频功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 #Javascript
jQuery自定义多选下拉框效果
Jun 19 #jQuery
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 #Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 #Javascript
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
微信小程序实现皮肤功能(夜间模式)
Jun 18 #Javascript
关于javascript作用域的常见面试题分享
Jun 18 #Javascript
You might like
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
Javascript的一种模块模式
2008/03/22 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python实现代码行数统计示例分享
2014/02/10 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python实现维吉尼亚算法
2019/03/20 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
详解Python3中的 input() 函数
2020/03/18 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
中学自我评价
2014/01/31 职场文书
财政局个人总结
2015/03/04 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
给朋友的道歉短信
2015/05/12 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers