今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊。
不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的,然后自己查阅各种资料,经过自己总结,最终完成了这个功能。
如果大家有什么问题可以提出来,一起交流,学习。有什么不对的地方也指出来,我也虚心学习。自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家。
1。实现的逻辑一定要清楚,多文件上传要在输入标签中添加多个属性
2。点击上传后触发的方法
3。循环将选择的文件添加到FormData对象中
4。将发送ajax的内容封装到一个方法中,循环ajax,对多个文件一次一次提交。这里要注意了,ajax循环时要采用递归的方式,如果采用的循环,就会得到你意想不到的结果,ajax是异步请求。
5。在ajax中添加xhr,设置上传监听事件。
6. java后台接收,当后台接收到行动时,你会看到getfile()方法中已经得到了上传文件在tomcat服务下的地址,其它参数均能得的到,这里我就不一一展示了。
7。当ajax成功返回数据时,说明该文件已经传到服务器上了,此时移除上一个文件并执行后面的文件发送ajax
8。监听事件的写法,监听每一个文件上传速度情况。
下面我就分享出我做测试用的代码,如果大家有什么不懂的地方可以评论出来,大家一起交流学习进步。
html部分:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>插入标题here
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/NewFile.css " rel=巴獠縩ofollow”比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-1.9.1.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/fileMuti.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=安馐浴北?
& lt;输入类型="文件" id=" fileMutiply " name="文件"多个=岸喔觥北?
& lt;/div>
& lt;/body>
& lt;/html>
js文件部分:这是关键,
/* *
*
*/var=0;
var j=0;
$(函数(){
$ (" # fileMutiply”)。改变(函数eventStart () {
var党卫军=this.files;//获取当前选择的文件对象
(var m=0; m< ss.length; m + +){//循环添加进度条
efileName=党卫军[m] . name;
如果(ss [m] .size>1024 * 1024){
sfileSize=(Math.round (ss [m]。尺寸/(1024 * 1024))).toString () +“m”;
}
其他{
sfileSize=(Math.round (ss [m] .size/1024)) .toString() +“知识库”;
}
$(" #测试”).append (
”李& lt; id=" + m +“file> & lt; div class='进步'祝辞& lt; div id=" + m +“barj类=progressbar的祝辞& lt;/div> & lt;/div> & lt;跨类=拔募痹凇? efileName +“& lt;/span> & lt;跨度id=" + m + pp类=皃rogressnum”在“+ (sfileSize) +“& lt;/span> & lt;/li>”);
}
sendAjax ();
函数sendAjax () {
如果(j>=ss.length)//采用递归的方式循环发送ajax请求
{
$ (" # fileMutiply ") .val (" ");
j=0;
返回;
}
var formData=https://www.yisu.com/zixun/new formData ();
formData。追加(“文件”,党卫军[j]);//将该文件对象添加到formData对象中
. ajax({美元
url:“fileUpLoad.action”,
类型:“文章”,
缓存:假的,
数据:{},//需要什么参数,自己配置
数据:formData,//文件以formData形式传入
processData:假的,//必须假才会自动加上正确的内容类型
contentType:假的,/* beforeSend: beforeSend,//发送请求
完成:完成,//请求完成
*/xhr:函数(){//监听用于上传显示进度
xhr=$ var .ajaxSettings.xhr ();
如果(onprogress,,xhr.upload) {
xhr.upload。addEventListener(“进步”,onprogress假);
返回xhr;
}
},
成功:功能(数据){
$ (" .filelist "); (“#”+ j +“文件”).remove();//移除进度条样式
+ +;//递归条件
sendAjax ();//}
}，
错误:函数(xhr) {
alert("上传出错”);
}
}）;
}
}）
函数onprogress (evt) {
var=evt.loaded加载;//已经上传大小情况
var合计=evt.total;//附件总大小
var/=Math.floor(100 *加载/总数);//已经上传的百分比
$ (" .filelist "); (“#”+ j +“pp”)。文本(每+“%”);
$ (" .filelist "); (“#”+ j + barj) .width(每+“%”);
};
})
