文件File

按钮

FileReader

File API的功能还不止于此，通过它提供的FileReader类型甚至还可以读取文件中的数据

【构造函数】

使用FileReader()构造函数来创建一个FileReader对象

var reader = new FileReader();

【属性】

error：表示在读取文件时发生的错误(只读)

readyState：表明FileReader对象的当前状态，值为状态常量中的一个(只读)

状态常量有以下三个

常量名      值    描述
EMPTY      0    还没有加载任何数据
LOADING    1    数据正在被加载
DONE       2    已完成全部的读取请求

result：表示读取到的文件内容，这个属性只在读取操作完成之后才有效，并且数据的格式取决于读取操作是由哪个方法发起的(只读)

【方法】

FileReader类型实现的是一种异步文件读取机制。可以把FileReader想象成XMLHttpRequest，区别只是它读取的是文件系统，而不是远程服务器。为了读取文件中的数据，FileReader提供了如下几个方法

abort()：中止该读取操作

readAsText(file或Blob,encoding)：以纯文本形式读取File或Blob对象的内容，将读取到的文本保存在result属性中。第二个参数(可选)用于指定编码类型，默认为UTF-8

readAsDataURL(file或Blob)：读取File或Blob对象的内容，并将文件以数据URI(进行Base64编码)的形式保存在result属性中

readAsBinaryString(file或Blob)：读取File或Blob对象的内容，并将一个字符串保存在result属性中，字符串中的每个字符表示一字节

readAsArrayBuffer(file或Blob)：读取File或Blob对象的内容，并将一个包含文件内容的ArrayBuffer保存在result属性中

[注意]IE浏览器不支持readAsBinaryString()方法

这些读取文件的方法为灵活地处理文件数据提供了极大便利。例如，可以读取图像文件并将其保存为数据URI，以便将其显示给用户，或者为了解析方便，可以将文件读取为文本形式

【事件】

由于读取过程是异步的，因此FileReader也提供了几个事件

onabort：当读取操作被中止时调用

onerror：当读取操作发生错误时调用

onload：当读取操作成功完成时调用

onloadend：当读取操作完成时调用，不管是成功还是失败。该处理程序在onload或者onerror之后调用

onloadstart：当读取操作将要开始之前调用

onprogress：在读取数据过程中周期性调用

在正常情况下，读取文件时，首先触发loadstart事件，此时的readyState为1，result为空

接着，每过50ms左右，就会触发一次progress事件，通过事件对象可以获得与XHR的progress事件相同的信息(属性)：lengthComputable、loaded和total。另外，尽管可能没有包含全部数据，但每次progress事件中都可以通过FileReader的result属性读取到文件内容，readyState仍然是1

当文件读取完成时，触发load事件，此时的readyState为2，result为文件内容；如果发生了error事件，就不会发生load事件