原生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 相关文章推荐
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
常用jQuery代码分享
Jul 14 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
js面向对象编程总结
2017/02/16 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Python之修改图片像素值的方法
2019/07/03 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
flask开启多线程的具体方法
2020/08/02 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
自我评价范文
2013/12/22 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
走进敬老院活动总结
2014/07/10 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
介绍长城的导游词
2015/01/30 职场文书
股权投资协议书
2016/03/23 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript