位置: 编程技术 - 正文
原生JavaScript实现异步多文件上传(原生js实现ajax步骤)
编辑：rootadmin推荐整理分享原生JavaScript实现异步多文件上传(原生js实现ajax步骤)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:原生js实现promise.all,原生js import,原生js实现promise.all,原生js import,原生js实现ajax步骤,原生js实现promise.all,原生js实现promise,原生js常用的方法,内容如对您有帮助，希望把文章链接给更多的朋友！
这是在上篇的修改版本。后台代码不变就可以接着使用，但是脚本不再使用jQuery了，改为原生的JavaScript 代码，所以我们主要看JS代码。
先介绍一下技术参数：
页面技术：HTML5
后台技术：Servlet 3.0
服务器：Tomcat 7.0
脚本：JavaScript
HTML5 file组件的新属性
accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。
multiple：是否允许选择多个文件HTML5 页面代码修改后
accept 的值可以参阅：IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。
如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码
既然可以循环多文件的话，就可以尝试多文件上传了。
1、首先创建 XMLHttpRequest 对象
//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的var xhr = new XMLHttpRequest()2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件
error：在请求发生错误时触发。
对应上传时发生错误导致的上传失败：uploadFailed()
最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。
PS: 这毕竟只是基本功能的演示示例，离公司使用的要求还相差十万八千里，请谨慎在公司平台使用。
大家可以结合这篇文章进行学习：基于HTML5 Ajax文件上传进度条如何实现（jquery版本）
标签: 原生js实现ajax步骤
本文链接地址:https://www.jiuchutong.com/biancheng/387070.html 转载请保留说明！
