FileReader詳解與實例---讀取並顯示圖像文件

我們曾經在《HTML5 中 File 對象初探》中，使用到了FileReader，在那篇文章中，它被用來將一個文件讀取爲二進制字符串，並通過 xhr 發送到後端形成交互。作爲 File API 的一部分，FileReader 專門用於讀取文件，根據 W3C 的定義，FileReader 接口 "提供一些讀取文件的方法與一個包含讀取結果的事件模型"。

接下來，我們將逐一瞭解 FileReader 的方法與事件模型，並最終通過一個例子程序來應用 FireRead，在這個例子中，使用支持 FileReader 瀏覽器的用戶將能夠通過一個 file input 選擇一個圖像文件，並不經過後臺將圖像顯示在頁面中。下面的鏈接指向這個例子，值得注意的是，到目前爲止，只有 Firefox 3.6+ 和 Chrome 6.0+ 實現了 FileReader 接口。

點此查看最終效果

在這之前的 web 應用程序中，實現這個效果的通常做法是將用戶選擇的圖像文件傳送至後端，後端對其進行存儲，再將 URL 返回到前端，前端通過這個 URL 來顯示圖像。 FileReader 的突破在於使得 JavaScript 擁有了處理文件的能力，它可以異步地讀取存儲在用戶電腦中的文件，這裏所指的文件，對於 JavaScript 來說是一個 File 對象，FileReader 讀取文件的全部方法皆依賴於此，對於 File 對象還不是很瞭解的話，請先閱讀《HTML5 中 File 對象初探》，這是本文的基礎。

1. 能力檢測與創建實例

檢測一個瀏覽器是否支持 FileReader 很容易做到，支持這一接口的瀏覽器有一個位於 window 對象下的 FileReader 構造函數，如果瀏覽器有這個構造函數，那麼就可以 new 一個 FileReader 的實例來使用。

if ( typeof FileReader === 'undefined' ) {
                alert( " 您的瀏覽器未實現 FileReader 接口 " );
        } else {
                var reader = new FileReader();
                // do sth.
        }

2. 方法

FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取。下面的表格列出了這些方法以及他們的參數和功能，需要注意的是 ，無論讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在result屬性中。

方法名 
參數 
描述

abort 
none 
中斷讀取

readAsBinaryString 
file 
將文件讀取爲二進制碼

readAsDataURL 
file 
將文件讀取爲 DataURL

readAsText 
file, [encoding] 
將文件讀取爲文本

readAsText： 該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值爲 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。 
readAsBinaryString： 這個方法在《HTML5 中 File 對象初探》中已經被使用過一次了，它將文件讀取爲二進制字符串，通常我們將它傳送到後端，後端可以通過這段字符串存儲文件。 
readAsDataURL： 這是例子程序中用到的方法，該方法將文件讀取爲一段以 data: 開頭的字符串，這段字符串的實質就是 Data URI，Data URI是一種將小文件直接嵌入文檔的方案。這裏的小文件通常是指圖像與 html 等格式的文件。點擊這裏瞭解更多關於 Data URI 的知識。

3. 事件

FileReader 包含了一套完整的事件模型，用於捕獲讀取文件時的狀態，下面這個表格歸納了這些事件。

事件 
描述

onabort 
中斷時觸發

onerror 
出錯時觸發

onload 
文件讀取成功完成時觸發

onloadend 
讀取完成觸發，無論成功或失敗

onloadstart 
讀取開始時觸發

onprogress 
讀取中

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

reader.onload = function () {
                this.result     // 讀取結果
        }

4. 實例

瞭解了這些知識過後，我們來還原之前的示例。第一步，創建 html 部分，主要包括一個 input 和一個用來呈現結果的 div：

<p>
  <label>請選擇一個圖像文件：</label>
  <input type="file" id="demo_input" />
</p> 
<div id="demo_result">
   <!-- 這裏用來顯示讀取結果 -->
</div>

接下來獲取節點，並處理瀏覽器兼容部分，對於未實現 FileReader 接口的瀏覽器將給出一個提示並禁用 input，否則監聽 input 的 change 事件。

if ( typeof FileReader === 'undefined' ){
        result.innerHTML = "<p class='warn'>抱歉，你的瀏覽器不支持 FileReader</p>";
        input.setAttribute( 'disabled','disabled' );} else {
        input.addEventListener( 'change',readFile,false );}

最後書寫函數 readFile 的代碼，當 file input 的 change 事件觸發時，調用這個函數，首先獲取到 file 對象，並通過 file 的 type 屬性來檢驗文件類型，在這裏，我們只允許選擇圖像類型的文件。然後創建一個 FileReader 實例，並且調用 readAsDataURL 方法讀取文件，在實例的 load 事件中，獲取到成功讀取到的文件內容，並以插入一個 img 節點的方式，顯示在頁面中。

function readFile(){
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)){
                alert("請確保文件爲圖像類型");
                return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
                result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        }}

參考資料：

• W3C File API --- FileReader Interface
• MDC --- FileReader