原生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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
采用call方式实现js继承
May 20 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
原生javascript实现分页效果
Apr 21 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
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对象转换为数组函数(递归方法)
2012/02/04 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
Vue AST源码解析第一篇
2017/07/19 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
给Python入门者的一些编程建议
2015/06/15 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
一百行python代码将图片转成字符画
2021/02/19 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
django框架auth模块用法实例详解
2019/12/10 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
回门宴父母答谢词
2014/01/26 职场文书
购房意向书范本
2014/04/01 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书