#文件操作API ##一、实验介绍在HTML5标准中，默认提供了操作文件的API让这一切直接标准化。有了操作文件的API，让我们的Web应用可以很轻松的通过JS来控制文件的读取、写入、文件夹、文件等一系列的操作。接下来主要给大家介绍文件读取的几个API。 ##二、实验步骤 ###2.1几个重要的JS对象 ####2.1.1 FileList对象它是File对象的一个集合，在HTML4标准中文件上传控件只接受一个文件，而在新标准中，只需要设置multiple，就支持多文件上传，所以从此标签中获取的files属性就是FileList对象实例。 demo：; 下面是关于FileList对象的API的原型： ``` interface FileList { getter File? item(unsigned long index); readonly attribute unsigned long length; }; ``` ####2.1.2 Blob对象其实就是一个原始数据对象，它提供了slice方法可以读取原始数据中的某块数据。另外有两个属性：size（数据的大小），type（数据的MIME类型; 看下面的是W3C的API原型: ``` interface Blob { readonly attribute unsigned long long size; readonly attribute DOMString type; //slice Blob into byte-ranged chunks Blob slice( optional long long start, optional long long end, optional DOMString contentType ); }; ``` ####2.1.3 File对象继承自Blob对象，指向一个具体的文件，它还有两个属性：name（文件名）,lastModifiedDate（最后修改时间）; W3C的标准： ``` interface File : Blob { readonly attribute DOMString name; readonly attribute Date lastModifiedDate; }; ``` ####2.1.4 FileReader对象设计用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据使用了异步的方式，非常高效。 W3C的标准： ``` [Constructor] interface FileReader: EventTarget { // async read methods void readAsArrayBuffer(Blob blob); void readAsBinaryString(Blob blob); void readAsText(Blob blob, optional DOMString encoding); void readAsDataURL(Blob blob); void abort(); // states const unsigned short EMPTY = 0; const unsigned short LOADING = 1; const unsigned short DONE = 2; readonly attribute unsigned short readyState; // File or Blob data readonly attribute any result; readonly attribute DOMError error; // event handler attributes attribute [TreatNonCallableAsNull] Function? onloadstart; attribute [TreatNonCallableAsNull] Function? onprogress; attribute [TreatNonCallableAsNull] Function? onload; attribute [TreatNonCallableAsNull] Function? onabort; attribute [TreatNonCallableAsNull] Function? onerror; attribute [TreatNonCallableAsNull] Function? onloadend; }; ``` **FileReader对象的三个读取文件数据方法 ** * readAsBinaryString(Blob blob) 传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中。 * readAsText(Blob blob, optional DOMString encoding) 第一个参数传入Blob对象，然后第二个参数传入编码格式，异步将数据读取成功后放到result属性中，读取的内容是普通的文本字符串的形式。 * readAsDataURL(Blob blob) 传入一个Blob对象，读取内容可以做为URL属性，也就是说可以将一个图片的结果指向给一个img的src属性。 ###2.2 读取文件上传控件里的文件并将内容已不同的方式展现到浏览器实例一：获取上传文件的文件名（注：需要引入jQuery） ```

``` 实例二：读取上传文件内容，然后将文件内容直接读取到浏览器上（注：需要引入jQuery） ```

``` ##三、实验总结有了文件操作的API后，让JS进一步的操作本地文件的得到空前的加强，HTML5对于客户端Web应用得到进一步功能的提升，HTML5的趋势让Web更加富客户端化，而这些都需要让我们的HTML或者JS变得更加强大，而HTML5正是适时地推出了File API。

“HTML5基础入门”实验报告