HTML5学习之FileReader接口

用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有FF3.6+和Chrome6.0+实现了FileReader接口。

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

 

FileReader接口的方法

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

 

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

 

FileReader接口的事件

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

 

3、FileReader接口的使用

1.  var result=document.getElementById("result");  
2. var file=document.getElementById("file");  
3.   
4. //判断浏览器是否支持FileReader接口  
5. if(typeof FileReader == 'undefined'){  
6.     result.InnerHTML="你的浏览器不支持FileReader接口！";  
7.     //使选择控件不可操作  
8.     file.setAttribute("disabled","disabled");  
9. }  
10.   
11. function readAsDataURL(){  
12.     //检验是否为图像文件  
13.     var file = document.getElementById("file").files[0];  
14.     if(!/image\/\w+/.test(file.type)){  
15.         ;  
16.         return false;  
17.     }  
18.     var reader = new FileReader();  
19.     //将文件以Data URL形式读入页面  
20.     reader.readAsDataURL(file);  
21.     reader.onload=function(e){  
22.         var result=document.getElementById("result");  
23.   
    
    
24.     }  
25. }  
26.   
27. function readAsBinaryString(){  
28.     var file = document.getElementById("file").files[0];  
29.     var reader = new FileReader();  
30.     //将文件以二进制形式读入页面  
31.     reader.readAsBinaryString(file);  
32.     reader.onload=function(f){  
33.         var result=document.getElementById("result");  
34.         //显示文件  
35.         result.innerHTML=this.result;  
36.     }  
37. }  
38.   
39. function readAsText(){  
40.     var file = document.getElementById("file").files[0];  
41.     var reader = new FileReader();  
42.     //将文件以文本形式读入页面  
43.     reader.readAsText(file);  
44.     reader.onload=function(f){  
45.         var result=document.getElementById("result");  
46.         //显示文件  
47.         result.innerHTML=this.result;  
48.     }  
49. }  
50.