HTML5之FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：

1.检测浏览器对FileReader的支持

[javascript] view plain copy

1. if(window.FileReader) {  
2.     var fr = new FileReader();  
3.     // add your code here  
4. }  
5. else {  
6.     alert("Not supported by your browser!");  
7. }  

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

关于dataurl,我的感悟是虽然是很多编码数据，但是可以作为例如img.src=dataurl即可展示图片

3. 处理事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

[javascript] view plain copy

1. fr.onload = function() {  
2.     this.result;  
3. };  

下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。

[html] view plain copy

1. <script type="text/javascript">  
2.         function showPreview(source) {  
3.             var file = source.files[0];  
4.             if(window.FileReader) {  
5.                 var fr = new FileReader();  
6.                 fr.onloadend = function(e) {  
7.                     document.getElementById("portrait").src = e.target.result;  
8.                 };  
9.                 fr.readAsDataURL(file);  
10.             }  
11.         }  
12.     </script>  
13.   
14. <input type="file" name="file" onchange="showPreview(this)" />  
15.                                 <img id="portrait" src="" width="70" height="75">  

如果要限定上传文件的类型，可以通过文件选择器获取文件对象并通过type属性来检查文件类型

[javascript] view plain copy

1. if(!/image\/\w+/.test(file.type)){  
2.     alert("请确保文件为图像类型");  
3.     return false;  
4. }  

不难发现这个检测是基于正则表达式的，因此可以进行各种复杂的匹配，非常有用。

如果要增加一个进度条，可以使用HTML 5的progress标签，通过下面的代码实现。

[html] view plain copy

1. <form>  
2.     <fieldset>  
3.         <legend>分度读取文件：</legend>  
4.         <input type="file" id="File" />  
5.         <input type="button" value="中断" id="Abort" />  
6.         <p>  
7.             <label>读取进度：</label><progress id="Progress" value="0" max="100"></progress>  
8.         </p>  
9.         <p id="Status"></p>  
10.     </fieldset>  
11. </form>  

[javascript] view plain copy

1. var h = {  
2.     init: function() {  
3.         var me = this;  
4.            
5.         document.getElementById('File').onchange = me.fileHandler;  
6.         document.getElementById('Abort').onclick = me.abortHandler;  
7.            
8.         me.status = document.getElementById('Status');  
9.         me.progress = document.getElementById('Progress');  
10.         me.percent = document.getElementById('Percent');  
11.            
12.         me.loaded = 0;  
13.         //每次读取1M  
14.         me.step = 1024 * 1024;  
15.         me.times = 0;  
16.     },  
17.     fileHandler: function(e) {  
18.         var me = h;  
19.            
20.         var file = me.file = this.files[0];  
21.            
22.         var reader = me.reader = new FileReader();  
23.            
24.         //  
25.         me.total = file.size;  
26.            
27.         reader.onloadstart = me.onLoadStart;  
28.         reader.onprogress = me.onProgress;  
29.         reader.onabort = me.onAbort;  
30.         reader.onerror = me.onerror;  
31.         reader.onload = me.onLoad;  
32.         reader.onloadend = me.onLoadEnd;  
33.         //读取第一块  
34.         me.readBlob(file, 0);  
35.     },  
36.     onLoadStart: function() {  
37.         var me = h;  
38.     },  
39.     onProgress: function(e) {  
40.         var me = h;  
41.            
42.         me.loaded += e.loaded;  
43.         //更新进度条  
44.         me.progress.value = (me.loaded / me.total) * 100;  
45.     },  
46.     onAbort: function() {  
47.         var me = h;  
48.     },  
49.     onError: function() {  
50.         var me = h;  
51.            
52.     },  
53.     onLoad: function() {  
54.         var me = h;  
55.    
56.         if(me.loaded < me.total) {  
57.             me.readBlob(me.loaded);  
58.         } else {  
59.             me.loaded = me.total;  
60.         }  
61.     },  
62.     onLoadEnd: function() {  
63.         var me = h;  
64.            
65.     },  
66.     readBlob: function(start) {  
67.         var me = h;  
68.            
69.         var blob,  
70.             file = me.file;  
71.            
72.         me.times += 1;  
73.            
74.         if(file.webkitSlice) {  
75.             blob = file.webkitSlice(start, start + me.step + 1);  
76.         } else if(file.mozSlice) {  
77.             blob = file.mozSlice(start, start + me.step + 1);  
78.         }  
79.            
80.         me.reader.readAsText(blob);  
81.     },  
82.     abortHandler: function() {  
83.         var me = h;  
84.            
85.         if(me.reader) {  
86.             me.reader.abort();  
87.         }  
88.     }  
89. };  
90.    
91. h.init(); 
    

文章来源:http://blog.csdn.net/jackfrued/article/details/8967667