这篇文章主要介绍了基于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>
