JS实现批量上传文件并显示进度功能-创新互联

今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊。

成都创新互联专业IDC数据服务器托管提供商,专业提供成都服务器托管,服务器租用,成都电信服务器托管成都电信服务器托管,成都多线服务器托管等服务器托管服务。

不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的。然后自己查阅各种资料,经过自己总结,最终完成了这个功能。

如果大家有什么问题可以提出来,一起交流,学习。有什么不对的地方也指出来,我也虚心学习。自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家。

条件:我采用struts2,java ,ajax,FormData实现;

JS实现批量上传文件并显示进度功能

1.实现的逻辑一定要清楚,多文件上传要在input标签中添加 multiple属性

JS实现批量上传文件并显示进度功能

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

JS实现批量上传文件并显示进度功能

3.循环将选择的文件添加到FormData对象中

JS实现批量上传文件并显示进度功能

4.将发送ajax的内容封装到一个方法中,循环ajax,对多个文件一次一次提交。这里要注意了,ajax循环时要采用递归的方式,如果采用for循环,就会得到你意想不到的结果,ajax是异步请求。

5.在ajax中添加xhr,设置上传监听事件。

JS实现批量上传文件并显示进度功能

6.java后台接收,当后台接收到action时,你会看到getFiles()方法中已经得到了上传文件在tomcat服务下的地址。,其它参数均能得到,这里我就不一一展示了。

JS实现批量上传文件并显示进度功能

7.当ajax成功返回数据时,说明该文件已经传到服务器上了,此时移除上一个文件并执行后面的文件发送ajax

JS实现批量上传文件并显示进度功能

8.监听事件的写法,监听每一个文件上传速度情况。

JS实现批量上传文件并显示进度功能

下面我就分享出我做测试用的代码,如果大家有什么不懂的地方可以评论出来,大家一起交流学习进步。

html部分:





Insert title here





另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻名称:JS实现批量上传文件并显示进度功能-创新互联
文章URL:http://azwzsj.com/article/gegjd.html