原生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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
JavaScript中的高级函数
Jan 04 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jquery 插件开发备注
2010/08/27 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
js charAt的使用示例
2014/02/18 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
js实现文字滚动效果
2016/03/03 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
15分钟上手vue3.0(小结)
2020/05/20 Javascript
详解Python中的文本处理
2015/04/11 Python
Python切片操作实例分析
2018/03/16 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
小学教师师德承诺书
2014/05/23 职场文书
导游词怎么写
2015/02/04 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
合理化建议书范文
2015/09/14 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
python基础之文件处理知识总结
2021/05/23 Python
MySQL 5.7常见数据类型
2021/07/15 MySQL
TS 类型兼容教程示例详解
2022/09/23 Javascript