【HTML5】HTML5文件操作API

一、 文件操作API

在之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的web应用依赖了第三方的插件，而不是很独立。 在HTML5标准中，默认提供了操作文件的API让这一切直接标准化。有了操作文件的API，让我们的Web应用可以很轻松的通过JS来控制文件的读取、写入、文件夹、文件等一系列的操作。

二、几个重要的JS对象

1. FileList对象
   它是File对象的一个集合，在HTML4标准中文件上传控件只接受一个文件，而在新标准中，只需要设置multiple，就支持多文件上传，所以从此标签中获取的files属性就是FileList对象实例。 demo：; 下面是关于FileList对象的API的原型：

interface FileList { 
        getter File? item(unsigned long index); 
        readonly attribute unsigned long length;
};

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 
        ); 
};

3. File对象
   继承自Blob对象，指向一个具体的文件，它还有两个属性：name（文件名）,lastModifiedDate（最后修改时间）; W3C的标准：

interface File : Blob { 
        readonly attribute DOMString name; 
        readonly attribute Date lastModifiedDate;
};

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;
};

这个对象是非常重要第一个对象，它提供了四个读取文件数据的方法，这些方法都是异步的方式读取数据，读取成功后就直接将结果放到属性result中。所以一般就是直接读取数据，然后监听此对象的onload事件，然后在事件里面读取result属性，再做后续处理。当然abort就是停止读取的方法。

****FileReader对象的三个读取文件数据方法：****

• readAsBinaryString(Blob blob)传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中。
• readAsText(Blob blob, optional DOMString encoding)第一个参数传入Blog对象，然后第二个参数传入编码格式，异步将数据读取成功后放到result属性中，读取的内容是普通的文本字符串的形式。
• readAsDataURL(Blob blob)传入一个Blob对象，读取内容可以做为URL属性，也就是说可以将一个图片的结果指向给一个img的src属性。

三、读取文件上传控件里的文件并将内容已不同的方式展现到浏览器

在展示代码之前，之前我们操作一个图片文件，都是先将图片上传到服务器端，然后再使用一个img标签指向到服务器的url地址，然后再进行一个使用第三方插件进行图片处理，而现在这一切都不需要服务器端了，因为FileReader对象提供的几个读取文件的方法变得异常简单，而且全部是客户端js的操作。

实例一：获取上传文件的文件名（注：需要引入jQuery）

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