本文详解JavaScript中处理文件上传的API。通过input[type=file]的files属性获取FileList，利用length和forEach替代方案遍历文件。解析文件对象的size、type等属性，实现上传前的类型与大小校验，提升用户体验并避免无效传输。
JavaScript文件上传API详解：从FileList到文件校验
对于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做的简单介绍，希望对大家的学习有所帮助。