原生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代码
Jan 01 Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
利用JS制作万年历的方法
2017/08/16 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
C语言编程练习
2012/04/02 面试题
汽车专业人才自我鉴定范文
2013/12/29 职场文书
教师个人的自我评价分享
2014/01/02 职场文书
简单的辞职信范文
2014/01/18 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
先进党支部申报材料
2014/12/24 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书