HTML5 File API解读

1，概述

　　Web应用应该具备处理广泛用户输入问题的能力，例如在Web富应用中，用户希望上传文件到服务器。File API定义了访问文件的基本操作途径，包括文件、文件列表集、错误处理等，同时，File API还定义了描述文件异步处理进程中的一些元数据。接下来，我们一起看看File的应用。

2,FileList接口

　接口描述：

 interface FileList {

       getter File? item(unsigned long index);

       readonly attribute unsigned long length;

 };

由FileList对象实现，它表示上传文件的集合列表。如下：

<input type="file" multiple="multiple" name="file" id="file" />

var fileList = document.forms['formName']['file'].files;

fileList有如下属性：

    1，length:表示文件列表长度，即文件数量

fileList有如下方法：

    1，index(indexNum):indexNum是文件在文件列表中的位置，从0开始，和普通数组下标一样，如果不存在，则返回null.

3，Blob接口

　　接口描述:

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

     };

由Bob对象实现，它是一个原始数据对象。如下：

 // Create a new Blob object

 var a = new Blob();

 // Create a 1024-byte ArrayBuffer

 // buffer could also come from reading a File

 var buffer = new ArrayBuffer(1024);

 // Create ArrayBufferView objects based on buffer

 var shorts = new Uint16Array(buffer, 512, 128);

 var bytes = new Uint8Array(buffer, shorts.byteOffset + shorts.byteLength);

 var b = new Blob(["foobarbazetcetc" + "birdiebirdieboo"], {type: "text/plain;charset=UTF-8"});

 var c = new Blob([b, shorts]);

 var a = new Blob([b, c, bytes]);

 var d = new Blob([buffer, b, c, bytes]);

Bolb有如下属性：

　　1，size：数据的大小

　　2，type：数据的MIME类型

Bolb有如下方法：

　　1，slice:用来读取原始数据中的某块数据,详情见如下例子

 // obtain input element through DOM

     var file = document.getElementById('file').files[0];

     if(file)

     {

       // create an identical copy of file

       // the two calls below are equivalent

       var fileClone = file.slice();

       var fileClone2 = file.slice(0, file.size);

       // slice file into 1/2 chunk starting at middle of file

       // Note the use of negative number

       var fileChunkFromEnd = file.slice(-(Math.round(file.size/2)));

       // slice file into 1/2 chunk starting at beginning of file

       var fileChunkFromStart = file.slice(0, Math.round(file.size/2));

       // slice file from beginning till 150 bytes before end

       var fileNoMetadata = file.slice(0, -150, "application/experimental");

     }

4，File接口

　　接口描述：

  interface File : Blob {

           readonly attribute DOMString name;

           readonly attribute Date lastModifiedDate;

  };

由File对象实现，它继承自Blob对象，指向一个具体的文件。

File有如下属性：

　　1，name:文件的名称

2，lastModifiedDate:文件的最后修改时间

5，FileReader接口

　　接口描述：

     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对象实现，用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据也提供了异步方式。

FileReader属性列表：

事件列表	事件说明
onloadstart	文件读取开始时触发
onprogress	当读取进行中时定时触发。事件参数中会含有已读取总数据量。
onabort	当读取被中止时触发。
onerror	当读取出错时触发。
onload	当读取成功完成时触发。
onloadend	当读取完成时，无论成功或者失败都会触发

FileReader方法列表：

方法列表	方法说明
readAsBinaryString()	读取文件内容，读取结果为一个 binary string。文件每一个 byte 会被表示为一个 [0..255] 区间内的整数。函数接受一个 File 对象作为参数。
readAsText()	读取文件内容，读取结果为一串代表文件内容的文本。函数接受一个 File 对象以及文本编码名称作为参数。
readAsDataURL	读取文件内容，读取结果为一个 data: 的 URL。DataURL 由 RFC2397 定义

参考出处：http://www.w3.org/TR/file-upload/

巴特西

HTML5 File API解读

最新文章

热门文章