1，概述

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

2,FileList接口

接口描述：

1 interface FileList {

2 getter File? item(unsigned long index);

3 readonly attribute unsigned long length;

4 };

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

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

fileList有如下属性：

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

fileList有如下方法：

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

3，Blob接口

接口描述:

1 interface Blob {

2

3 readonly attribute unsigned long long size;

4 readonly attribute DOMString type;

5

6 //slice Blob into byte-ranged chunks

7 Blob slice(optional long long start,

8 optional long long end,

9 optional DOMString contentType);

10

11 };

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

1 // Create a new Blob object

2

3 var a = new Blob();

4

5 // Create a 1024-byte ArrayBuffer

6 // buffer could also come from reading a File

7

8 var buffer = new ArrayBuffer(1024);

9

10 // Create ArrayBufferView objects based on buffer

11

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

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

14

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

16

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

18

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

20

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

Bolb有如下属性：

1，size：数据的大小

2，type：数据的MIME类型

Bolb有如下方法：

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

1 // obtain input element through DOM

2

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

4 if(file)

5 {

6 // create an identical copy of file

7 // the two calls below are equivalent

8

9 var fileClone = file.slice();

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

11

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

13 // Note the use of negative number

14

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

16

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

18

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

20

21 // slice file from beginning till 150 bytes before end

22

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

24 }

4，File接口

接口描述：

1 interface File : Blob {

2 readonly attribute DOMString name;

3 readonly attribute Date lastModifiedDate;

4 };

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

File有如下属性：

1，name:文件的名称

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

5，FileReader接口

接口描述：

1 interface FileReader: EventTarget {

2

3 // async read methods

4 void readAsArrayBuffer(Blob blob);

5 void readAsBinaryString(Blob blob);

6 void readAsText(Blob blob, optional DOMString encoding);

7 void readAsDataURL(Blob blob);

8

9 void abort();

10

11 // states

12 const unsigned short EMPTY = 0;

13 const unsigned short LOADING = 1;

14 const unsigned short DONE = 2;

15

16

17 readonly attribute unsigned short readyState;

18

19 // File or Blob data

20 readonly attribute any result;

21

22 readonly attribute DOMError error;

23

24 // event handler attributes

25 attribute [TreatNonCallableAsNull] Function? onloadstart;

26 attribute [TreatNonCallableAsNull] Function? onprogress;

27 attribute [TreatNonCallableAsNull] Function? onload;

28 attribute [TreatNonCallableAsNull] Function? onabort;

29 attribute [TreatNonCallableAsNull] Function? onerror;

30 attribute [TreatNonCallableAsNull] Function? onloadend;

31

32 };

由FileReader对象实现，用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据也提供了异步方式。

FileReader属性列表：

事件列表

事件说明

onloadstart

文件读取开始时触发

onprogress

当读取进行中时定时触发。事件参数中会含有已读取总数据量。

onabort

当读取被中止时触发。

onerror

当读取出错时触发。

onload

当读取成功完成时触发。

onloadend

当读取完成时，无论成功或者失败都会触发

FileReader方法列表：

方法列表

方法说明

readAsBinaryString()

读取文件内容，读取结果为一个 binary string。文件每一个 byte 会被表示为一个 [0..255] 区间内的整数。函数接受一个 File 对象作为参数。

readAsText()

读取文件内容，读取结果为一串代表文件内容的文本。函数接受一个 File 对象以及文本编码名称作为参数。

readAsDataURL

读取文件内容，读取结果为一个 data: 的 URL。DataURL 由 RFC2397 定义