本文摘自 勾三股四 更早时期的 不老歌 博客。

#FileList[index] // 得到第index个文件

Blob接口

#Blob.size // 只读特性，数据的字节数
#Blob.type // 只读属性，数据的MIME类型
#Blob.slice(start, end) // 将当前文件切割并将结果返回

File接口

#File.size // 继承自Blob，意义同上
#File.slice(start, length) // 继承自Blob，意义同上
#File.name // 只读属性，文件名
#File.type // 只读属性，文件的MIME类型
#File.lastModifiedDate // 只读属性，文件的上次修改日期

FileReader方法

#FileReader.readAsArrayBuffer(blob/file) // 以ArrayBuffer格式读取文件内容
#FileReader.readAsBinaryString(blob/file) // 以二进制格式读取文件内容(该方法已不推荐使用，感谢 @超人与酱油瓶 指正)
#FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式读取文件内容，并且可以强制选择文件编码
#FileReader.readAsDataURL(file) // 以DataURL格式读取文件内容
#FileReader.abort() // 终止读取操作

FileReader事件

#FileReader.onloadstart // 读取操作开始时触发
#FileReader.onload // 读取操作成功时触发
#FileReader.onloadend // 读取操作完成时触发(不论成功还是失败)
#FileReader.onprogress // 读取操作过程中触发
#FileReader.onabort // 读取操作被中断时触发
#FileReader.onerror // 读取操作失败时触发

FileReader属性

#FileReader.result // 读取的结果(二进制、文本或DataURL格式)
#FileReader.readyState // 读取操作的状态(EMPTY、LOADING、DONE)

代码示例

举例一：控制file控件，读取其中的第二个文件，并将其文本内容在控制台输出

var input = document.querySelector('input[type="file"]'); // 找到第一个file控件
var firstFile = input.files[0]; // file控件的files特性其实就是一个FileList类型的对象
var secondFile = input.files[1]; // 当file控件的multiple特性为true时，我们可以同时选择多个文件，通过input.files[n]可以按序访问这些文件
var reader = new FileReader(); // 新建一个FileReader类型的对象
reader.readAsText(secondFile); // 按文本格式读取file控件中的第二个文件
reader.onloadend = function (e) { // 绑定读取操作完成的事件
    console.log(reader.result); // 取得读取结果并输出
};

举例二：给一个含utf-8编码的文本文件file去掉BOM头信息

var size = file.size; // 先取得文件总字节数
var result = file.slice(3, size - 3); // 用slice方法去掉开头的3个字节

最后，对FileAPI实践的两点注意

1. #Blob.slice在webkit内核中加入了前缀，即#Blob.webkitSlice；
2. 规范中还明确规定了各种出错处理和异常处理，这些内容是同样重要的：不论对于一套完备的规范，还是对于一个健壮的程序而言。由于篇幅有限，这部分就不细说了，大家可以在W3C官网自由查阅

-------- 再补充一个知识：Blob URI --------

这个东西可以为一个Blob对象提供URI访问的方式和可能，内存中的Blob对象无法很方便的传递给其它页面，于是我们设计了Blob URI，使得这个Blob对象可以在同源的任何网页中，通过向这个URI发送Ajax请求等方式进行访问。

window.URL.createObjectURL(blob[, options])
window.URL.revokeObjectURL(url)

前者可以为blob创建一个URI，后者可以取消url对应的blob关联。这里面还有一个options值得注意，目前options中只有oneTimeOnly特性有效，表示该url第一次被调用后自动revoke。

由于File继承自Blob，所以我们也可以将某个File对象转化成URI供同源网页访问和使用。

var url = window.URL.createObjectURL(imageFile);
...
img.src = url;
...
window.URL.revokeBlobURL();

-------- 补充完毕 --------

以上就是FileAPI的简单介绍。万丈高楼平地起，后面的文件操作会更神奇更有趣。

(未完待续)