原生JavaScript实现异步多文件上传

这是在上篇的修改版本。后台代码不变就可以接着使用，但是脚本不再使用jQuery了，改为原生的Javascript 代码，所以我们主要看JS代码。

先介绍一下技术参数：

页面技术：HTML5

后台技术：Servlet 3.0

服务器：Tomcat 7.0

脚本：Javascript

HTML5 file组件的新属性

accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。

multiple：是否允许选择多个文件
HTML5 页面代码修改后

最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。



 //上传文件
function uploadFile() {
　　//将上传的多个文件放入formData中
 var picFileList = $("#pic").get(0).files;
 var formData = new FormData();
 for(var i=0; i< picFileList.length; i++){
  formData.append("file" , picFileList[i] );
 }

 //监听事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
 xhr.open("POST", "upload");
 //记得加入上传数据formData
　　 xhr.send(formData);
} 



PS: 这毕竟只是基本功能的演示示例，离公司使用的要求还相差十万八千里，请谨慎在公司平台使用。
大家可以结合这篇文章进行学习：基于HTML5 Ajax文件上传进度条如何实现（jquery版本）
以上就是本文的全部内容，希望对大家的学习有所帮助。