1.檢測瀏覽器對FileReader的支持
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 等格式的文件。（其中base64的方式就是由此來獲得的。。）
3. 處理事件
FileReader 包含了一套完整的事件模型，用於捕獲讀取文件時的狀態，下面這個表格歸納了這些事件。
| 事件 | 描述 |
|---|---|
| onabort | 中斷時觸發 |
| onerror | 出錯時觸發 |
| onload | 文件讀取成功完成時觸發 |
| onloadend | 讀取完成觸發，無論成功或失敗 |
| onloadstart | 讀取開始時觸發 |
| onprogress | 讀取中 |
文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。
fr.onload = function() { this.result; };
例子1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FileReader</title> </head> <body> <p> <label>請選擇一個文件：</label> <input type="file" id="file" /> <input type="button" value="讀取圖像" onclick="readAsDataURL()" /> <input type="button" value="讀取二進制數據" onclick="readAsBinaryString()" /> <input type="button" value="讀取文本文件" onclick="readAsText()" /> </p> <div id="result" name="result"></div> </body> </html> <script type="text/javascript"> var result=document.getElementById("result"); var file=document.getElementById("file"); //判斷瀏覽器是否支持FileReader接口 if(typeof FileReader == 'undefined'){ result.InnerHTML="<p>你的瀏覽器不支持FileReader接口！</p>"; //使選擇控件不可操作 file.setAttribute("disabled","disabled"); } function readAsDataURL(){ //檢驗是否為圖像文件 var file = document.getElementById("file").files[0]; if(!/image\/\w+/.test(file.type)){ alert("看清楚，這個需要圖片！"); return false; } var reader = new FileReader(); //將文件以Data URL形式讀入頁面 reader.readAsDataURL(file); reader.onload=function(e){ var result=document.getElementById("result"); //顯示文件 result.innerHTML='<img src="' + this.result +'" alt="" />'; } } function readAsBinaryString(){ var file = document.getElementById("file").files[0]; var reader = new FileReader(); //將文件以二進制形式讀入頁面 reader.readAsBinaryString(file); reader.onload=function(f){ var result=document.getElementById("result"); //顯示文件 result.innerHTML=this.result; } } function readAsText(){ var file = document.getElementById("file").files[0]; var reader = new FileReader(); //將文件以文本形式讀入頁面 reader.readAsText(file); reader.onload=function(f){ var result=document.getElementById("result"); //顯示文件 result.innerHTML=this.result; } } </script>