综述HTML5 File API
HTML5新增了一组与本地文件进行交互的API。这组API增强了前端操作文件数据的能力，以前通常要借助后端实现的一些功能，例如断点续传，图片预览等现在也可以在前端轻松的完成了。
文件访问接口
Blob
这是文件数据的核心接口，其他操作数据的API都是建立在该对象的基础上。一个Blob对象就表示一个二进制大型文件对象。通过构造函数Blob可以实现原始数据到可操作数据的转化。示例如下:
let a = {hello: 'world'};
let blob = new Blob([JSON.stringify(debug, null, 2)], {type: 'application/json'});
该构造函数接受两个参数，第一个参数是包含实际数据的数组，第二个参数是数据的类型。Blob对象的属性都是只读的，拥有的属性和方法如下:
- Blob.isClosed
布尔值，指示Blob.close()是否在该对象上调用过，关闭的blob对象不可读。
- Blob.size
Blob对象中包含数据的大小。
- Blob.type
一个字符串，表明该Blob对象包含数据的MIME类型。如果类型未知则该值为空字符串。
- Blob.close()
关闭Blob对象，以便释放资源。
- Blob.slice()
将二进制数据按照字节分块，返回新的Blob对象，包含了源对象指定范围内的数据。
File
该接口继承自Blob对象，提供了有关文件的信息。新增的属性有:
- File.lastModified
返回当前File对象所引用文件的最后修改时间。
- File.name
返回当前File对象所引用文件的名字。
- File.size
返回文件大小。
- File.type
返回文件的MIME类型。
FileList
该接口针对的是表单的file控件，结构上等同于file对象的数组表现形式。我们不可以手动构造FileList对象，只能被动的读取并通过JS访问内部的file对象。
选择文件
表单输入
要选择文件最直接的方法就是使用input元素了，例子如下:
<input type="file" id="input" multiple>
通过multiple属性控制选择文件的数量。所有选择的文件都被包含在FileList对象中，可以通过DOM来获取。
let selectedFile = document.getElementById('input').files
拖放操作
用户还可以将本地文件拖放到目的区域来实现选择。
首先指定一个拖放操作的目的区域并绑定上相关拖放事件:
let dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragover', dragover, false);
dropbox.addEventListener('drop', drop, false);
阻止拖放事件的默认行为后实现自定义逻辑:
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
let files = e.dataTransfer.files; // 获取成功
}
读取文件
FileReader
读取文件的核心是FileReader对象，该对象允许web应用异步读取File或Blob对象，读取到数据后我们就可以在应用进行各种各样的处理了。通过构造函数FileReader()创建该对象。该对象 读取文件时有3个状态常量表示读取进度:
- 0：EMPTY，还没有加载任何数据。
- 1：LOADING，数据正在被加载。
- 2:：DONE，已完成全部读取请求。
对象的属性都是只读的，如下:
- error：读取文件发生的错误。
- readyState：表明对象的当前状态，值为3个状态常量之一。
- result：读取到的文件内容，这个属性只在读取完成之后有效，并且数据格式取决于读取操作的方法。
对象的方法如下:
- abort()
中止读取操作,返回时状态常量的值为DONE。
- readAsArrayBuffer()
读取指定Blob对象或File对象中的内容，读取完成时readyState的值变为DONE，同时result属性将包含一个ArrayBuffer对象表示读取内容。
- readAsBinaryString()
使用方法同上，result属性包含原始二进制数据表示读取内容。
- readAsDataURL()
使用方法同上，result属性包含一个基于base64编码的data-uri对象。
- readAsText()
使用方法同上，result属性包含一个字符串表示读取内容，文本编码格式是UTF-8，可以通过可选格式参数指定其他编码格式。
URL
除了FileReader构造函数外，我们还可以使用URL.createObjectURL方法生成一个URL对象，该方法接受参数为File对象或Blob对象。通过该方法生成的URL代表着资源的临时指向地址，生存时间等于网页的存在时间，也可以手动调用URL.revokeObjectURL方法让其失效。
读取文件相关事件监听
当读取文件时，会有一系列事件反应读取的状态，这些事件可以被FileReader监听，也可以被XMLHttpRequest调用，同样也适用于img和video等资源标签。
- loadstart
当程序开始加载时触发。
- progress
当加载正在进行中时触发。
- error
当加载失败时触发。
- abort
当加载被正常终止时触发。
- load
当加载完成时触发。
- loadend
当资源加载进度停止时被触发，例如错误出现时或正常中止时。
-- EOF --