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


Posted in Javascript onDecember 02, 2015

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

先介绍一下技术参数:

页面技术:HTML5

后台技术:Servlet 3.0

服务器:Tomcat 7.0

脚本:JavaScript

HTML5 file组件的新属性

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

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

<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>

accept 的值可以参阅:IANA MIME 类型(标准 MIME 类型的完整列表),如果使用的是DW开发的话,软件本身就有提示。

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

function printFileInfo(){
 
 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()

//上传失败
function uploadFailed(evt) {
 alert("上传失败");
}
progress:在接收相应期间持续不断触发。




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

最后就是上传方法了,注意上面的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版本)

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

Javascript 相关文章推荐
Js的MessageBox
Dec 03 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 #Javascript
日常收藏的jquery技巧
Dec 02 #Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 #Javascript
jquery密码强度校验
Dec 02 #Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 #Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 #Javascript
js实现继承的5种方式
Dec 01 #Javascript
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
elementUI select组件value值注意事项详解
2019/05/29 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Python中 map()函数的用法详解
2018/07/10 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
汽修专业自荐信
2014/07/07 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
Python 内置函数速查表一览
2021/06/02 Python
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL