对于 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 做这么多简单的介绍. 这是一个很好的 API, 帮助我们放置在上传文件时浪费大量的时间. 这个文件上传 API 里很有很多这里没有介绍的知识, 你可以到 MDN 上进心详细阅读.
来源: http://www.webhek.com/post/javascript-upload-file-api.html