HTML5 之 FileReader（圖片上傳）

一、FileReader接口的方法

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

　　FileReader接口的方法：

　　　　1. readAsBinaryString(file) : 將文件讀取爲二進制編碼,

　　　　2. readAsText(file,[encoding]) : 將文件讀取爲文本,

　　　　3. readAsDataURL(file) : 將文件讀取爲DataURL,

　　　　4. abort(none) : 中斷讀取操做.

二、FileReader接口事件

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

　　　　1. onabort : 中斷,

　　　　2. onerror : 出錯,

　　　　3. onloadstart : 開始,

　　　　4. onprogress : 正在讀取,

　　　　5. onload : 讀取成功,

　　　　6. onloadend : 讀取完成，不管成功失敗(不管成功失敗)。

三、FileReader接口的使用

 1 <script type="text/javascript">  
 2 var result=document.getElementById("result");  
 3 var file=document.getElementById("file");  
 4   
 5 //判斷瀏覽器是否支持FileReader接口  
 6 if(typeof FileReader == 'undefined'){  
 7     result.InnerHTML="<p>你的瀏覽器不支持FileReader接口！</p>";  
 8     //使選擇控件不可操做  
 9     file.setAttribute("disabled","disabled");  
10 }  
11   
12 function readAsDataURL(){  
13     //檢驗是否爲圖像文件  
14     var file = document.getElementById("file").files[0];  
15     if(!/image\/\w+/.test(file.type)){  
16         alert("看清楚，這個須要圖片！");  
17         return false;  
18     }  
19     var reader = new FileReader();  
20     //將文件以Data URL形式讀入頁面  
21     reader.readAsDataURL(file);  
22     reader.onload=function(e){  
23         var result=document.getElementById("result");  
24         //顯示文件  
25         result.innerHTML='<img src="' + e.target.result +'" alt="" />';  
26     }  
27 }  
28   
29 function readAsBinaryString(){  
30     var file = document.getElementById("file").files[0];  
31     var reader = new FileReader();  
32     //將文件以二進制形式讀入頁面  
33     reader.readAsBinaryString(file);  
34     reader.onload=function(f){  
35         var result=document.getElementById("result");  
36         //顯示文件  
37         result.innerHTML=this.result;  
38     }  
39 }  
40   
41 function readAsText(){  
42     var file = document.getElementById("file").files[0];  
43     var reader = new FileReader();  
44     //將文件以文本形式讀入頁面  
45     reader.readAsText(file);  
46     reader.onload=function(f){  
47         var result=document.getElementById("result");  
48         //顯示文件  
49         result.innerHTML=this.result;  
50     }  
51 }  
52 </script>  
53 <p>  
54     <label>請選擇一個文件：</label>  
55     <input type="file" id="file" />  
56     <input type="button" value="讀取圖像" onclick="readAsDataURL()" />  
57     <input type="button" value="讀取二進制數據" onclick="readAsBinaryString()" />  
58     <input type="button" value="讀取文本文件" onclick="readAsText()" />  
59 </p>  
60 <div id="result" name="result"></div>