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

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

先介绍一下技术参数：

页面技术：HTML5

后台技术：Servlet 3.0

服务器：Tomcat 7.0

脚本：JavaScript

HTML5

file组件的新属性

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

multiple：是否允许选择多个文件

HTML5 页面代码修改后

accept 的值可以参阅：

IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。

如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码

var picFile = document.getElementById("pic");
var files = picFile.files;
for(var i=0; i<files.length; i++){
var file = files[i];
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
",文件类型："+ file.type +",文件大小:"+ file.size
document.body.appendChild( div)
}
}

既然可以循环多文件的话，就可以尝试多文件上传了。

1、首先创建 XMLHttpRequest 对象

//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的 var xhr = new XMLHttpRequest() 2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件

error：在请求发生错误时触发。

　　　对应上传时发生错误导致的上传失败：uploadFailed()

　　　　　　对应上传进度方法：onprogress()
/**

• 侦查附件上传情况,这个方法大概0.05-0.1秒执行一次
  /
  function onprogress(evt){
  　var loaded = evt.loaded; //已经上传大小情况
  var tot = evt.total; //附件总大小
  var per = Math.floor(100loaded/tot); //已经上传的百分比
  　 $("#son").html( per +"%" );
  $("#son").css("width",per +"%");
  }

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

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

PS: 这毕竟只是基本功能的演示示例，离公司使用的要求还相差十万八千里，请谨慎在公司平台使用。

大家可以结合这篇文章进行学习：

以上就是本文的全部内容，希望对大家的学习有所帮助。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。