欢迎来到山村网

JavaScript如何上传文件(psd,压缩包等),图片,视频

2019-03-09 12:57:09浏览:550 来源:山村网   
核心摘要:废话不多说了,直接给大家贴代码了,具体代码如下所示:// 上传目标触发点 input type=file class=upvideo name=upvideo id=file

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

// 上传目标触发点 <input type="file" class="upvideo" name="upvideo" id="fileupload1" /> // 引入插件 <script type="text/javascript" src=http://www.shancun.net/skin/default/image/nopic.gif 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;     //}    }; } 

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

(责任编辑:豆豆)
下一篇:

linux系统下的常用指令

上一篇:

磊科NR205PLUS怎么设置

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com