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与DropDownList 区别分析
Jan 01 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python的pycurl包用法简介
2015/11/13 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
Sony C++笔试题
2013/03/10 面试题
高中教师考核方案
2014/05/18 职场文书
地球一小时宣传标语
2014/06/24 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript