原生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 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
详解Vue This$Store总结
2018/12/17 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
js实现微信聊天效果
2020/08/09 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
利用python汇总统计多张Excel
2020/09/22 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
软件部经理岗位职责范本
2014/02/25 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
装配出错检讨书
2014/09/23 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
课题研究阶段性总结
2015/08/13 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL