JavaScript中文件上传API详解
更新时间：2016年04月01日 15:35:03 投稿：lijiao
这篇文章主要为大家详细介绍了JavaScript中文件上传API，介绍了上传文件API的使用方法，感兴趣的小伙伴们可以参考一下
对于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定时器实现限时秒杀功能，适合用于电商节日活动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最近项目结束，很空闲，于是就试着仿照微信跳一跳写了一个极简版的游戏，到底简单到什么程度呢?大家可以参考下本文2018-01-01
想必大家对Function.prototype.bind并不陌生吧，下面为大家介绍下它的简单调用及DOM调用，感兴趣的朋友可以参考下2013-09-09
此算法的实现，就是模拟人脑的思考和计算过程，有需要的朋友可以参考一下2013-10-10
这篇文章主要介绍了基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动,代码简单易懂非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
用showModalDialog弹出页面后，提交表单总是弹出一个新窗口
用showModalDialog弹出页面后，提交表单总是弹出一个新窗口,其实解决方法很简单如下。2009-07-07
本篇文章主要是对js中数组(Array)的排序(sort)注意事项进行了说明介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了自己写的一个利用JavaScript检测CPU使用率的方法,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了JavaScript tab选项卡插件实例代码的相关资料,需要的朋友可以参考下2016-02-02
让textarea自动调整大小的js代码，需要的朋友可以参考下。2011-04-04
最新评论