JavaScript中文件上传API详解


Posted in Javascript onApril 01, 2016

对于Web程序员来说,在网页上处理文件上传,总是一件很麻烦的事情。在过去,我们不能够通过拖拽上传图片,也没有复杂Ajax上传技术,很少处理多文件批量上传。我们也无法获取上传过程中的信息,除非上传完成后从服务器端获得。有时候,等你上传完毕后才发现上传的文件不合适!

如今,HTML5的革命,现代浏览器的诞生,JavaScript的升级,这些给我们提供了使用Javascript和input[type=file]元素获取上传文件过程信息的能力。

下面就来看看这些上传文件API是如何使用的!

访问要上传的文件列表信息

如果要获得所有input[type=file]里要上传的文件列表,你需要使用files属性:

// Assuming <input type="file" id="upload" multiple>

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {
 console.log(uploadInput.files) // File listing!
});

不幸的是,这个FileList并没有一个叫做forEach的方法,所以我们只能使用老式的循环技巧对FileList进行循环操作:

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
 console.log(files[i]);
}

很重要的一点,FileList里是有一个length属性的。

获取单个上传文件的信息

FileList里的每个文件对象里都保存着大量的关于这个文件的信息,包括文件的体积大小,文件MIME类型,最后修改时间,文件名称等:

{
 lastModified: 1428005315000,
 lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
 name: "profile.pdf",
 size: 135568,
 type: "application/pdf",
 webkitRelativePath: ""
}

这些基础信息对我们来说最大的用处就是,我们可以在上传文件之前校验它们。例如,你可以校验文件的类型和体积大小:

var maxAllowedSize = 500000;

for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i < fileCount; i++) {
 totalSize += files[i].size;
 if(totalSize > maxAllowedSize) {
 // Notify the user that their file(s) are too large
 }

 if(files[i].type != 'application/pdf') {
 // Notify of invalid file type for file in question
 }
}

如果用户上传的文件的体积太大,超过了允许范围,或上传的类型不对,你可以阻止用户上传,然后给予他们必要的提示,是什么原因不能上传成功。

以上就是对文件上传API做的简单介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
使用zrender.js绘制体温单效果
Oct 31 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 #Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 #Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 #Javascript
jQuery实现下拉加载功能实例代码
Apr 01 #Javascript
Extjs实现下拉菜单效果
Apr 01 #Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 #Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 #Javascript
You might like
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
javascript 播放器 控制
2007/01/22 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python中Apriori算法实现讲解
2017/12/10 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
python super()函数的基本使用
2020/09/10 Python
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
总经理司机职责
2014/02/02 职场文书
单位绩效考核方案
2014/05/11 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
体育运动会广播稿
2014/10/05 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis