当前位置 主页 > 网站技术 > 代码类 >

    基于jquery ajax的多文件上传进度条过程解析

    栏目:代码类 时间:2019-09-11 18:13

    这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    效果图

    前端代码,基于jquery

    <!DOCTYPE html><html> <head>  <title>主页</title>  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  <style type="text/css">      *{        padding: 0;        margin: 0;      }      table{        width: 600px;        text-align: center;      }  </style> </head> <body>     <input type="file" id="imgsend" name="file" value="发送图片" multiple="multiple" />      <table border="1" cellspacing="0" cellpadding="0">        <thead>          <tr>            <td>名称</td>            <td>大小</td>            <td>进度</td>            <td>结果</td>          </tr>        </thead>        <tbody>          <!-- <tr>              <td>xxx</td>              <td>100</td>              <td class="per">100%</td>              <td class="result">成功</td>           </tr>-->        </tbody>      </table> </body> <script type="text/javascript" src="/javascripts/jquery.js"> </script>   <script type="text/javascript">    ;(function($){   $.fn.extend({        uploadFile:function(option){          var that = this;          var defau = {            type:"post",            cache:false,            url:"",            data:{},            processData:false,            contentType:false,            success:function(){},            error:function(){},            progress:function(){},            sendBefore:function(){},            filter:[], //可以接受的文件后缀            upName:true //是否对文件名称转化大写比对                       }          option = $.extend(true, defau, option);                    var  fileP = that.attr("name") || "file"; //传给后端得 file对应字段          console.log(fileP)          var files = that[0].files;                     option.sendBefore(files); //发送之前                     for(var i = 0,len = files.length; i < len; i++ ){             var fs = files[i];             var fnameArr = fs.name.split('.');             var fNmae = fnameArr.pop();             var str = '';             if(option.upName){                fNmae = fNmae.toUpperCase();             }else{                fNmae = fNmae.toLowerCase();             }             if(option.filter.length > 0 && option.filter.indexOf(fNmae) !== -1){                option.error("文件后缀不符",i);                  continue;             }             fileUpload(files[i],i);                       }                     //开始文件上传          function fileUpload(file,index){             var fd = new FormData();             fd.append(fileP,file);                          //追加其他参数             for(var i in option.data){                fd.append(i,option.data[i]);             }                          $.ajax({              url: option.url,              type: option.type,             data: fd,             cache: option.cache,             processData: option.processData,             contentType: option.contentType,              success:function(data){                option.success(data,index);                               },              error:function(error){                console.log(error);                option.error(error,index);              },              xhr: function(){                var xhr = $.ajaxSettings.xhr();                if(onprogress && xhr.upload) {                 xhr.upload.addEventListener("progress" , onprogress, false);                 return xhr;                }            }             });                         function onprogress(evt){              var loaded = evt.loaded;   //已经上传大小情况             var tot = evt.total;   //附件总大小             var per = Math.floor(100*loaded/tot); //已经上传的百分比              file.loaded = loaded;              file.total = tot;              file.percent = per + '%';              file.index = index;              option.progress(file);            }          }          return that;        }   });    })($,window);   //发送图片     var $table = $("table tbody");     $("#imgsend").on('change',function(){    var that = this;          $(that).uploadFile({      url:"/api/file",      data:{},      filter:[], //后缀文件筛选      sendBefore:function(files){         //开始之前         console.log(files);         var str = '';         for(var i = 0; i < files.length; i++){          var item = files[i];          str += '<tr>'+                '<td>'+ item.name +'</td>'+                '<td>'+ FormatSize (item.size) +'</td>'+                '<td class="per">0</td>'+                '<td class="result"></td>'+              '</tr>';         }                   $table.html(str);                },      success:function(data,index){         //某个文件传完        var $tr = $table.find('tr').eq(index);        $tr.find('.result').html("成功");      },      error:function(err,index){        //某个文件报错        $tr.find('.result').html("失败");      },      progress:function(file){        //某个文件的上传进度                 // file.loaded 已经上传的        // flie.total 总量        // file.percent 百分比        // file.index  第多少个文件        var $tr = $table.find('tr').eq(file.index);        $tr.find('.per').html(file.percent);        console.log(file.name + ":第" + file.index + '个:' + file.percent);      }      });  });        //文件大小格式化function FormatSize (fileSize) {   var arrUnit = ["B", "K", "M", "G", "T", "P"],     baseStep = 1024,     unitCount = arrUnit.length,     unitIndex = 0;            while(fileSize >= baseStep && unitIndex < unitCount - 1){     unitIndex++;     fileSize /= baseStep;   }   fileSize = fileSize.toFixed(2);   return fileSize + " " + arrUnit[unitIndex]; }  </script></html>