在 JavaScript 中處理文件，第 2 部分：FileReader
在上一篇文章中，我介紹了在 JavaScript 中使用文件，特別關注如何訪問 File 對象。這些對象包含僅當用戶選擇上傳文件或將文件拖放到網頁上時獲得的文件元數據。但是，一旦有了文件，下一步就是從中讀取數據。
FileReader 類型
FileReader type 有一個工作：從文件中讀取數據並將其存儲在 JavaScript 變量中。該 API 被有意設計為類似於 XMLHttpRequest 因為兩者都從外部（瀏覽器外部）資源加載數據。讀取是異步完成的，以免阻塞瀏覽器。
FileReader 有幾種格式 可以create來表示文件數據，要求讀取文件時必須要求格式。讀取是通過調用以下方法之一完成的：
readAsText()– 以純文本形式返回文件內容readAsBinaryString()– 將文件內容作為一串編碼二進制數據返回（已棄用 – 使用readAsArrayBuffer()而是 )readAsArrayBuffer()– 以ArrayBuffer形式返回文件內容 （適用於圖像等二進制數據）readAsDataURL()– 將文件內容作為數據 URL 返回
這些方法中的每一個都會啟動一個類似於 XHR 對象的 send() 的文件讀取 方法發起一個 HTTP 請求。因此，您必須監聽 load 開始閱讀之前的事件。讀取的結果始終由 event.target.result 表示 .例如：
var reader = new FileReader();
reader.onload = function(event) {
var contents = event.target.result;
console.log("File contents: " + contents);
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsText(file);
此示例只是讀取文件的內容並將其以純文本形式輸出到控制台。 onload 成功讀取文件時調用處理程序，而 onerror 如果由於某種原因未讀取文件，則調用處理程序。 FileReader 實例可通過 event.target 在事件處理程序內部使用 並且建議使用它而不是引用 reader 直接變量。 result 屬性包含成功時的文件內容和 error 包含有關失敗操作的錯誤信息。
讀取數據 URIs
您可以使用相同的基本設置來讀取數據 URI。例如，如果您想顯示剛從磁盤讀取的圖像，數據 URI（有時稱為數據 URL）是一個有趣的選項。您可以使用以下代碼：
var reader = new FileReader();
reader.onload = function(event) {
var dataUri = event.target.result,
img = document.createElement("img");
img.src = dataUri;
document.body.appendChild(img);
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
此代碼只是將從磁盤讀取的圖像插入到頁面中。由於data URI包含了所有的圖片數據，所以可以直接傳入src 圖像的屬性並顯示在頁面上。或者，您可以加載圖像並將其繪製到 <canvas> 還有：
var reader = new FileReader();
reader.onload = function(event) {
var dataUri = event.target.result,
context = document.getElementById("mycanvas").getContext("2d"),
img = new Image();
// wait until the image has been fully processed
img.onload = function() {
context.drawImage(img, 100, 100);
};
img.src = dataUri;
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
此代碼將圖像數據加載到新的 Image 對象，然後使用該對象將圖像繪製到畫布上（將寬度和高度都指定為 100）。
數據 URI 通常用於此目的，但可用於任何類型的文件。將文件讀入數據 URI 的最常見用例是立即在網頁上顯示文件內容。
讀取ArrayBuffers
ArrayBuffer 輸入
1
最初是作為 WebGL 的一部分引入的。一個 ArrayBuffer 表示可用於存儲任意大小數字的有限字節數。從 ArrayBuffer 讀取數據的方式 是通過使用特定視圖，例如 Int8Array ，它將底層字節視為 8 位有符號整數或 Float32Array 的集合 ，它將底層字節視為 32 位浮點數的集合。這些被稱為類型化數組
2
，這會迫使您使用特定的數值類型，而不是包含任何類型的數據（與傳統數組一樣）。
您使用 ArrayBuffer 主要是在處理二進製文件時，對數據進行更細粒度的控制。解釋 ArrayBuffer 的所有細節超出了本文的範圍 ，只需意識到您可以將文件讀入 ArrayBuffer 如果你需要它很容易。你可以傳遞一個 ArrayBuffer 直接進入 XHR 對象的 send() 將原始數據發送到服務器的方法（您必須從服務器上的請求中讀取此數據以重建文件），只要您的瀏覽器完全支持 XMLHttpRequest Level 2
3
（最新的瀏覽器，包括 Internet Explorer 10 和 Opera 12）。
下一個
使用 FileReader 從文件中讀取數據 很簡單。如果你知道如何使用 XMLHttpRequest ，你沒有理由不能從文件中讀取數據。在本系列的下一部分中，您將了解有關使用 FileReader 的更多信息 事件並進一步了解可能的錯誤。
參考
- 數組緩衝區
- 類型化數組規範
- XMLHttpRequest 級別 2
