FileReader詳解

FileReader詳解

FileReader API提供了大量的方法來讀取File對象或Blob對象，並且這些方法都是異步的。這意味着當程序讀取文件時並不會發生阻塞，使用這些方法讀取大文件將更加有用。

簡單地說，FileReader對象可以異步讀取存儲在開發者的計算機磁盤上的數據內容，可以使用File對象或Blob對象來指定所要處理的文件或數據。File對象提供了三種方式來讀取文件，第一種文件是讀取用戶在<input>元素選擇文件之後返回的FileList對象，第二種方式是讀取使用拖放API的方式自動生成的DataTransfer對象，第三種方式是獲取在HTML文檔中的canvas上執行的mozGetAsFile()方法後返回的對象。

首先創建一個FileReader實例

    var reader = new FileReader();

在控制檯進行輸出，可以看到

實例創建完成後，瞭解下FileReader提供的方法。

1. readAsText(blob[, encoding])方法

readAsText()方法可以用來讀取文本文件，這個文件有兩個參數，第一個參數用來讀取File對象或Blob對象。第二個參數用來指定文件的編碼，這是個可選參數，默認值爲國際通用的UTF-8編碼格式。

這個方法是一個異步方法，需要在文件加載完成時設置事件監聽器。當調用onload時間時，可以訪問FileReader實例的result屬性來獲取文件的內容。對於FileReader提供的所有讀取方法，開發者需要使用相同的方式獲取內容。

    reader.onload = function (e) {
        var text = reader.result;
    }

    reader.readAsText(file, encoding);

在codepen上寫一個簡單的demo。

2. readAsDataURL()方法

readAsDataURL()方法接受File對象或者Blob對象，並生成data URl。 實際上這基本是一個Base64編碼的文件數據字符串。開發中可以使用data URL設置圖片的src屬性。

    reader.onload = function (e) {
        var dataUrl = reader.result;
    }

    reader.readAsDateURL(file);

在codepen上寫一個簡單的demo。

3. readAsBinaryString()方法

readAsBinaryString()方法可以讀取任何類型的文件。調用該方法將從文件返回原始二進制數據。使用readAsBinaryString()和XMLHttpRequest.sendAsBinary()方法，開發中可以通過編輯好的JavaScript腳本將任何文件上傳到服務器。

    reader.onload = function (e) {
        var rawData = reader.result;
    }

    reader.readAsBinary(file);

1. readAsArrayBuffer()方法

readAsArrayBuffer()方法將讀取一個Blob對象或者File對象，併產生一個ArrayBuffer對象。ArrayBuffer對象是一個固定長度的二進制數據緩衝。它們在處理文件可以派上用場(如將JPEG轉換爲PNG)。

    reader.onload = function (e) {
        var arrayBuffer = reader.result;
    }

    reader.readAsArrayBuffer(file);

1. abort()方法

abort()方法可以終止任意操作，因此，在讀取大文件的時候，這個文件能派上用場。

    reader.abort();

FileReader的常用屬性

屬性名	類型	描述
error	DOMError	當讀取文件時發生錯誤
readyState	Unsinged short	表明FileReader對象的當前狀態，值爲State constants中的一個
result	jsval	讀取到的文件內容，這個屬性只在讀取操作完成後有效，並且數據的格式取決於讀取操作是由哪個方法發起的

在實際的開發中經常使用的是result屬性，通過這個屬性可以獲取讀取操作之後的值。當然，在使用各個方法的過程中也能使用常量。

常量名	值	描述
EMPTY	0	還沒加載任何數據
LOADING	1	數據正在加載
DONE	2	已完成全部的讀取請求

常量名	值	描述
EMPTY	0	還沒加載任何數據
LOADING	1	數據正在加載
DONE	2	已完成全部的讀取請求