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数组插入一条记录的代码
Aug 30 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
快速入门Vue
2016/12/19 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
python实现2048小游戏
2015/03/30 Python
python导入时小括号大作用
2017/01/10 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python爬取微信公众号文章
2018/08/31 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Python LMDB库的使用示例
2021/02/14 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
自荐书格式
2013/12/01 职场文书
实习教师自我鉴定
2013/12/09 职场文书
大学学习生活感言
2014/01/18 职场文书
消防应急演练方案
2014/02/12 职场文书
保密承诺书
2014/03/27 职场文书
电工技术比武方案
2014/05/11 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
js之ajax文件上传
2021/05/13 Javascript
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers