HTML5之FileReader介面讀取文件 1.FileReader介面的方法 2.FileReader介面事件 3.FileReader介面的使用 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" cont ...

HTML5之FileReader介面讀取文件

用來把文件讀入記憶體，並且讀取文件中的數據。FileReader介面提供了一個非同步API，使用該API可以在瀏覽器主線程中非同步訪問文件系統，讀取文件中的數據。到目前為止，只有FF3.6+和Chrome6.0+實現了FileReader介面。

1.FileReader介面的方法

FileReader介面有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在result屬性中。

方法名參數描述

readAsBinaryString file 將文件讀取為二進位編碼

readAsText file,[encoding] 將文件讀取為文本，其中第二個參數是文本的編碼方式，預設值為 UTF-8

readAsDataURL file 將文件讀取為DataURL

abort (none) 終端讀取操作

2.FileReader介面事件

FileReader介面包含了一套完整的事件模型，用於捕獲讀取文件時的狀態。

事件描述

onabort 中斷

onerror 出錯

onloadstart 開始

onprogress 正在讀取

onload 成功讀取

onloadend 讀取完成，無論成功失敗

3.FileReader介面的使用

文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程式都會在成功讀取文件的時候，抓取這個值。

var reader=new FileReader();

reader.onload = function() {

this.result;

};

var reader=new FileReader();

reader.onload = function(e) {

e.target.result;

};

例子1：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 <style>
 7 img{
 8     width:100px;
 9     height:100px;
10 }
11 </style>
12 </head>
13 <body>
14 <script type="text/javascript">
15 if(typeof FileReader == 'undefined'){    //判斷瀏覽器是否支持FileReader介面  
16     var div=document.getElementById("dd");
17     div.innerHTML='你的瀏覽器不支持FileReader介面！';
18     document.getElementById("file").setAttribute("disabled","disabled");
19     document.getElementById("filea").setAttribute("disabled","disabled");
20     document.getElementById("fileb").setAttribute("disabled","disabled");
21 }
22 
23 function show(){
24     var file=document.getElementById("file").files[0];
25     var reg=/image\/\w+/;
26     if(!reg.test(file.type)){    //判斷是否為圖片
27         return false;
28     }
29     if(file){
30         var reader = new FileReader();
31         reader.onload = function ( event ) {
32             var txt = event.target.result;
33             var img = document.createElement("img");
34             img.src = txt;
35             document.getElementById("content").appendChild( img );
36         }
37     }
38     reader.readAsDataURL(file);
39 } 
40 function aShow(){
41     var file=document.getElementById("filea").files[0];
42     if(file){
43         var reader=new FileReader();
44         reader.onload=function(){
45             var cona=document.getElementById("contenta");
46             cona.innerHTML=this.result;
47         }
48     }
49     reader.readAsBinaryString(file);
50 }
51 function bShow(){
52     var file=document.getElementById("fileb").files[0];
53     if(file){
54         var reader=new FileReader();
55         reader.onload=function(e){
56             var conb=document.getElementById("contentb");
57             conb.innerHTML=e.target.result;
58         }
59     }
60     reader.readAsText(file);
61 }
62 </script> 
63 <div id="dd"> </div>
64 <p>圖像：<input type="file" name="file" id='file' onchange='show()'/></p>
65 <p id='content'></p>
66 <p>二進位文件：<input type="file" name="file" id='filea' onchange='aShow()'/></p>
67 <p id='contenta'></p>
68 <p>文本文件：<input type="file" name="file" id='fileb' onchange='bShow()'/></p>
69 <p id='contentb'></p>
70 </body>
71 </html>

例子2：相容IE的上傳圖片

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>     
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
 5 <title>圖片上傳本地預覽</title>     
 6 <style type="text/css">
 7 #preview{width:547px;height:626px;border:1px solid #000;overflow:hidden;}
 8 #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
 9 input{margin-top:20px;}
10 </style>
11 <script type="text/javascript">
12 
13 
14                 //圖片上傳預覽    IE是用了濾鏡。
15         function previewImage(file)
16         {
17           var MAXWIDTH  = 547; 
18           var MAXHEIGHT = 626;
19           var div = document.getElementById('preview');
20           if (file.files && file.files[0])
21           {
22               div.innerHTML ='<img id=imghead>';
23               var img = document.getElementById('imghead');
24               img.onload = function(){
25                 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
26                 img.width  =  rect.width;
27                 img.height =  rect.height;
28 //                 img.style.marginLeft = rect.left+'px';
29                 img.style.marginTop = rect.top+'px';
30               }
31               var reader = new FileReader();
32               reader.onload = function(evt){img.src = evt.target.result;}
33               reader.readAsDataURL(file.files[0]);
34           }
35           else //相容IE
36           {
37             var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
38             file.select();
39             var src = document.selection.createRange().text;
40             div.innerHTML = '<img id=imghead>';
41             var img = document.getElementById('imghead');
42             img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
43             var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
44             status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
45             div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
46           }
47         }
48         function clacImgZoomParam( maxWidth, maxHeight, width, height ){
49             var param = {top:0, left:0, width:width, height:height};
50             if( width>maxWidth || height>maxHeight )
51             {
52                 rateWidth = width / maxWidth;
53                 rateHeight = height / maxHeight;
54                 
55                 if( rateWidth > rateHeight )
56                 {
57                     param.width =  maxWidth;
58                     param.height = Math.round(height / rateWidth);
59                 }else
60                 {
61                     param.width = Math.round(width / rateHeight);
62                     param.height = maxHeight;
63                 }
64             }
65             
66             param.left = Math.round((maxWidth - param.width) / 2);
67             param.top = Math.round((maxHeight - param.height) / 2);
68             return param;
69         }
70 </script>     
71 </head>     
72 <body>
73      
74     <input type="file" onchange="previewImage(this)" />  
75     <div id="preview">
76         <img id="imghead" src=''>
77     </div>   
78 </body>     
79 </html>

示例3：有上傳進度條

既然FileReader是非同步讀取文件內容，那麼就應該可以監聽它的讀取進度。事實上，FileReader的onloadstart以及onprogress等事件，可以用來監聽FileReader的讀取進度。

在onprogress的事件處理器中，提供了一個ProgressEvent對象，這個事件對象實際上繼承了Event對象，提供了三個只讀屬性：lengthComputable、loaded、total；通過以上幾個屬性，即可實時顯示讀取進度。w3c官網上對它的定義如下：

interface ProgressEvent : Event {

readonly attribute boolean lengthComputable;

readonly attribute unsigned long long loaded;

readonly attribute unsigned long long total;

};

如果處理的文件太大，可能會導致瀏覽器崩潰（chrome下一般都會崩潰掉，而firefox則不會，不過會觸發FileReader的onerror事件，文件讀取失敗），所以為了安全地、正常地觀察到文件讀取進度，我們採用分段讀取的方法來測試FileReader的進度條。

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>無標題文檔</title>
  6 
  7 </head>
  8 
  9 <body>
 10 <form>  
 11     <fieldset>  
 12         <legend>分度讀取文件：</legend>  
 13         <input type="file" id="file" />  
 14         <input type="button" value="中斷" id="Abort" />  
 15         <p>  
 16             <label>讀取進度：</label><progress id="Progress" value="0" max="100"></progress>  
 17         </p>  
 18         <p id="Status"></p>  
 19     </fieldset>  
 20 </form>  
 21 <script>
 22     var h = {  
 23     init: function