今天接受项目批量上传文件，显示上传进度。一开始我觉得这样应该不会很麻烦。在做的时候遇到了很多问题，头疼。

但是看了别人写的代码，自己测试了一下，发现网上有很多问题，不是我想要的。然后，经过查阅各种资料和总结，这个功能终于完成了。

有问题请大家一起交流学习。指出了哪里不对，我虚心学习。我自己刚开始写博客。你的赞美是我写博客的动力。谢谢你。

条件：我用struts2、java、ajax和FormData来实现。

1.实现的逻辑必须清晰，在上传多个文件时，应该将multiple属性添加到输入标签中

2.点击上传后触发的方法

3.将所选文件松散地添加到FormData对象中

4.将发送ajax的内容封装到一个方法中，循环ajax，一劳永逸地提交多个文件。这里，我们应该注意ajax循环时的递归方式。如果使用for循环，将会得到意想不到的结果。ajax是一个异步请求。

5.将xhr添加到ajax中，并设置上传监控事件。

6.java背景接收。当后台收到动作时，您会看到在getFiles()方法中已经获得了tomcat服务下上传文件的地址。其他参数可以得到，这里就不一一展示了。

7.当ajax成功返回数据时，意味着文件已经发送到服务器。此时，移除前面的文件并执行下面的文件来发送ajax

8.监控事件的写入和每个文件的上传速度。

接下来，我将分享我用来做测试的代码。有什么不懂的可以评论。让我们一起分享学习进度。

Html部分：

！DOCTYPE htmlhtmlhearteta charset=' UTF-8 ' title在此插入标题/titlelink rel='样式表' type='text/css' href='。/CSS/NewFile . CSS ' rel=' external no follow '脚本类型=' text/JavaScript ' src=' http :/js/jquery-1 . 9 . 1 . min . js/' script script type=' text/Javascript ' src=' http :/js/filemuti . js '/script/head dydiv id=' test '输入类型=' file ' id=' file circuit ' name=' files ' multiple=' multiple '/div/body/html js文件部分：这是关键。

/* * * */var I=0；var j=0；$(function(){ $(“# fileMutiply”)).更改(函数EventStart(){ var ss=this。文件；//获取当前选择的文件对象for(var m=0；MSS . length mm){//循环添加进度条efileName=ss[m].姓名；if (ss[m]).size 1024 * 1024){ sfileSize=(数学。回合.大小/(1024 * 1024))。toString()" MB "；} else { sfileSize=(数学。回合.size/1024)).toString()" KB "；} $(“# test”).追加(' Li id=' m ' file div class=' progress ' div id=' m ' barj class=' progress bar '/div/div span class=' filename ' ' Efilename '/span span id=' m ' PPS class=' progress num ' '(sfileSize)'/span/Li ')；} SendAJax()；函数sendAjax() { if(j=ss.length) //采用递归的方式循环发送创建交互式、快速动态网页应用的网页开发技术请求{ $(“# fileMutiply”).val(" ")；j=0；返回；} var formData=new formData()；formData.append('files '，ss[j])；//将该文件对象添加到表单数据对象中$.Ajax({ URL : ' FileUpload。操作'，键入：'POST '，cache: false，data:{}，//需要什么参数，自己配置data: formData，//文件以表单数据形式传入processData : false，//必须错误的才会自动加上正确的内容类型内容类型：假，/*发送前：发送前，//发送请求完成：完成，//请求完成*/xhr:函数(){ //监听用于上传显示进度var xhr=$。AJaxsettings。xhr()；if(onprogress xhr。上传){ xhr。上传。addeventlistener(' progress '，on progress，false)；返回xhr} }，success:function(data){ $(' .文件列表').查找(' #' j '文件')。移除();//移除进度条样式j；//递归条件sendAjax()；//} }，error:function(xhr){ alert('上传出错');} });} })函数进行中(evt){ var loaded=evt。已加载；//已经上传大小情况var tot=evt.total//附件总大小var per=数学。楼层(100 *负载/总重量);//已经上传的百分比$('.文件列表').查找(' #' j 'pps ').文本（根据"%");$('.文件列表').查找(' #' j 'barj ').宽度（每"%");};})以上所述是小编给大家介绍的射流研究…实现批量上传文件并显示进度，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！