原生JavaScript实现异步多文件上传
这是在上篇的修改版本。后台代码不变就可以接着使用，但是脚本不再使用jQuery了，改为原生的JavaScript代码，所以我们主要看JS代码。
先介绍一下技术参数：
页面技术：HTML5
后台技术：Servlet3.0
服务器：Tomcat7.0
脚本：JavaScript
HTML5file组件的新属性
accept:如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。
multiple：是否允许选择多个文件
HTML5页面代码修改后
<imgwidth="400"height="250"/><br/> <inputtype="file"id="pic"name="pic"onchange="printFileInfo()"accept="image/*"multiple="multiple"/> <inputtype="button"value="上传图片"onclick="uploadFile()"/><br/> <divid="parent"> <divid="son"></div> </div>
accept的值可以参阅：IANAMIME类型（标准MIME类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。
如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码
functionprintFileInfo(){
varpicFile=document.getElementById("pic");
varfiles=picFile.files;
for(vari=0;i<files.length;i++){
varfile=files[i];
vardiv=document.createElement("div")
div.innerHTML="第("+(i+1)+")个文件的名字："+file.name+
",文件类型："+file.type+",文件大小:"+file.size
document.body.appendChild(div)
}
}
既然可以循环多文件的话，就可以尝试多文件上传了。
1、首先创建XMLHttpRequest对象
//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的
varxhr=newXMLHttpRequest()
2、上篇介绍了进度事件(Progress)，这次实现progress和error2个事件
error：在请求发生错误时触发。
对应上传时发生错误导致的上传失败：uploadFailed()
//上传失败
functionuploadFailed(evt){
alert("上传失败");
}
progress：在接收相应期间持续不断触发。
对应上传进度方法：onprogress()
/**
*侦查附件上传情况,这个方法大概0.05-0.1秒执行一次
*/
functiononprogress(evt){
varloaded=evt.loaded;//已经上传大小情况
vartot=evt.total;//附件总大小
varper=Math.floor(100*loaded/tot);//已经上传的百分比
$("#son").html(per+"%");
$("#son").css("width",per+"%");
}
最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。
//上传文件
functionuploadFile(){
//将上传的多个文件放入formData中
varpicFileList=$("#pic").get(0).files;
varformData=newFormData();
for(vari=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:这毕竟只是基本功能的演示示例，离公司使用的要求还相差十万八千里，请谨慎在公司平台使用。
大家可以结合这篇文章进行学习：基于HTML5Ajax文件上传进度条如何实现（jquery版本）
以上就是本文的全部内容，希望对大家的学习有所帮助。