在HTML5中，新增了File API，现在可以让网页要求用户选择本地文件，并且读取这些文件的信息了。选择的方式既可以是HTML < input > 元素，也可以是拖拽 。
File API 包含哪些接口？
| 接口 | 数据类型 | 用途 |
|---|---|---|
| Blob | Blob | Blob 对象是包含有只读原始数据的类文件对象 |
| File | File | File 接口提供了文件的信息，以及文件内容的存取方法。通常来自于上面FileList，一个FileList数组通常包含有多个File |
| FileList | Array | 用户选择的文件集合。通常来自于一个input元素的files属性 |
| FileReader | Function | 可以创建读取文件实例的构造函数。实例上有读取不同类型文件的方法和事件机制 |
另外，还新增了一种URL结构——URL Scheme（类似URL的格式），称为对象URL，也被称为Blob URL，指的是引用保存在File或Blob中数据的URL。好处是不必读取文件到js中而直接使用文件内容。
我们来简明扼要地总结一下它们的使用。
Blob对象
Blob对象可以存放二进制数据，还可以设置这个数据的MINE类型，这相当于对文件的储存，其它很多二进制对象也是从这个对象继承的。
属性：
| 属性 | 描述 |
|---|---|
| size | 文件的字节大小 |
| type | 字符串，文件的MIME类型 |
方法：
Blob.slice([start[, end[, contentType]]])
返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
事件： loadstart、progress、abort、error、load、loadend
构造函数：
/**
* @param {[Array]} 文件内容，其内容由参数中给定的数组串联组成,可以是ArrayBuffer、ArrayBufferView、Blob、DOMString
* @param {[Object]} 包含一个属性：{type: 文件的媒体类型}
*/
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
{type : 'application/json'});
File对象
File对象继承自Blob对象，因此它拥有Blob上的实例属性和事件机制，并且扩展支持用户计算机上的本地文件。
属性：
每个File对象，都有以下属性：
| 属性 | 描述 |
|---|---|
| name | 文件名 |
| size | 文件的字节大小 |
| type | 字符串，文件的MIME类型 |
| lastModified | 字符串，文件上一次被修改的时间（仅Chrome实现） |
方法和事件
（同Blob，略）
构造函数：
/**
* @param {[Array]} 文件内容，其内容由参数中给定的数组串联组成,可以是ArrayBuffer、ArrayBufferView、Blob、DOMString
* @param {[String]} 文件名称
* @param {[Object]} 包含两个属性：{type: 文件的媒体类型,lastModified: 文件上一次被修改的时间}
*/
var file = new File([content1,content2], name, {type:'text/javascript',lastModified:+new Date})
获取方法：
html:
javascript:
var selected_file = document.getElementById('input').files[0];
FIleList
所有type属性(attribute)为file的 < input > 元素都有一个files属性(property)，用来存储用户所选择的文件。
属性：
length：FileList对象中file的数量
方法：
FIleList.item(index)：根据给定的索引值.返回FileList对象中对应的File对象
事件：
（同Blob，略）
获取方法：
html:
javascript:
var file = document.getElementById('fileItem').files[0];
FileReader
如果你使用过node.js，那一定会对读文件操作fs.readFile非常熟悉了，现在在前端也可以有类似读文件操作了，那就是FileReader。
方法：
| 方法 | 描述 | 参数 |
|---|---|---|
| abort() | 中止该读取操作 | 无 |
| readAsArrayBuffer() | 读取文件，event.result属性中将包含一个ArrayBuffer对象 | File或Blob对象 |
| readAsBinaryString() | 读取文件，event.result属性中将包含原始二进制数据 | File或Blob对象 |
| readAsDataURL() | 读取文件，event.result属性中将包含一个data: URL格式的字符串 | File或Blob对象 |
| readAsText() | 读取文件，event.result属性中将包含一个字符串 | File或Blob对象 |
事件：
（同Blob，略）
使用方法：
var file = document.getElementById('file').files[0]; // 获取file对象
var reader = new FileReader(); // 创建一个FileReader实例
reader.onload = function(event){ // 监听onload事件，获取读文件结果
console.log(event.target.result);
}
注意：由于读取操作是异步的，因此在执行readAsXXX()操作之前，必须先让FileReader实例监听onload事件，待文件读取完后进行下一步操作。
图解File API四大接口的关系
