用來把檔案讀入記憶體，並且讀取檔案中的資料。FileReader介面提供了一個非同步API，使用該API可以在瀏覽器主執行緒中非同步訪問檔案系統，讀取檔案中的資料。到目前文職，只有FF3.6+和Chrome6.0+實現了FileReader介面。

1、FileReader介面的方法

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

2、FileReader介面事件

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

3、FileReader介面的使用

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