HTML5 File API解读

PHPABC Html5 1,021 次浏览 , 没有评论

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 定义

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go