HTML5

的FIle api 在许多HTML5规范中，一些规范与文件处理有关。在早期的浏览器技术中，处理小字符串是js的最佳过程之一。但文件处理，特别是二进制处理，一直是空白。在某些情况下，我们必须通过Flash/ActiveX/NP插件或云服务器处理更复杂或底层的数据。今天，一组新的HTML5规范正致力于为浏览器提供更强大的文件处理功能。

今天要介绍的FileAPI就是为解决这些问题而诞生的。

总览

FileAPI是许多列文件处理规范的基础，包括最基本的文件操作JavaScript接口设计。有四个主要的接口定义：

◆FileList接口:可用于表示一组文件的JS对象，例如用户通过输入[type='file']元素选择的本地文件列表

◆Blob接口:用于表示一段二进制数据，并允许我们通过JS“切割”其数据的字节数

◆文件接口:用于传输从Blob接口继承的文件，并添加文件名和MIME类型等功能。

◆FileReader接口:提供读取文件的方法和事件

这里有两个细节需要注意：

1.我们通常使用input [type='file']元素来选择单个文件，它本身允许同时选择多个文件，因此将使用FileList

2. Blob接口和File接口可以返回诸如数据的字节数或“cut”之类的信息，但是无法获取真实内容，这就是FileReader存在的含义，并且文件可能存在时文件大小不同。花了很多时间，所以我们使用异步方法通过触发另一个事件来返回文件的内容

接口描述

这四个接口实际上并不复杂且易于理解（接口中的“#Foo”表示任何类型为Foo的对象）：

FileList接口

#FileList [index] //获取索引文件

Blob界面

#Blob.size //只读属性，数据的字节数＃Blob.slice（start，length）//剪切当前文件并将结果返回给

文件界面

#File.size //从Blob继承，其含义与＃File.slice（start，length）相同//从Blob继承，含义与#File.name相同//只读属性，文件名#File.type //只读属性，文件MIME类型#File.urn //只读属性，表示文件的URN，几乎没有用，暂时被忽略

FileReader方法

#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）

代码示例

示例1：控制文件控件，读取第二个文件，并在控制台中输出其文本内容

Varinput=document.querySelector（'input [type='file']'）; //找到第一个文件控件varfirstFile=input.files [0]; //文件控件的files属性实际上是一个FileList类型对象varsecondFile=input.files [1]; //当文件控件的multiple属性为true时，我们可以通过input.files [同时选择多个文件] n]可以按顺序访问这些文件varreader=newFileReader（）; //新建一个FileReader类型对象reader.readAsText（secondFile）; //以文本格式读取文件控件中的第二个文件。 reader.onloadend=function（e）{//bind read operations completed event.log（Reader.result）; //获取读取结果和输出};

示例2：从包含UTF-8编码的文本文件文件中删除BOM表头信息

Varsize=file.size; //首先获取文件的总字节数varresult=file.slice（3，size-3）; //使用slice方法删除前3个字节

最后，关注FileAPI实践的三点

1.由于规范尚未最终确定，＃File.urn仍然有大变量，webkit没有实现此功能

2.＃Blob.slice为webkit内核添加前缀，即＃Blob.webkitSlice，第二个参数不是“length”，而是“end”。换句话说，上面的例子2应该改为file.webkitSlice（3，size）才能生效

3.规范还规定了各种错误处理和异常处理，它们同样重要：对于一整套规范或强大的程序。由于空间有限，本部分将不再详述。您可以在W3C官方网站上自由查看