JavaScript如何实现上传文件,图片,视频功能

这篇文章给大家分享的是有关JavaScript如何实现上传文件,图片,视频功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体代码如下所示：

// 上传目标触发点  <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如何实现上传文件,图片,视频功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！