标签：
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对象实现，它表示上传文件的集合列表。如下：
<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接口
接口描述:
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 定义 |
参考出处：http://www.w3.org/TR/file-upload/
标签：
原文地址：http://www.cnblogs.com/wenber/p/4244837.html
