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 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
js笔试题-接收get请求参数
Jun 15 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
JS setTimeout与setInterval的区别
Apr 20 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 curl模拟登录带验证码的网站
2015/11/30 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
utf8的编码算法 转载
2006/12/27 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
JavaScript模块详解
2017/12/18 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
让Python更加充分的使用Sqlite3
2017/12/11 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
使用tensorflow实现线性回归
2018/09/08 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python解析多层json操作示例
2019/12/30 Python
python实现随机加减法生成器
2020/02/24 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
刚毕业大学生自荐信范文
2014/02/20 职场文书
小学生元旦广播稿
2014/02/21 职场文书
预备党员公开承诺书
2014/05/28 职场文书
实施意见格式范本
2015/06/05 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang