在JavaScript中進行文件處理，第二部分：文件讀取

譯注：原文是《JavaScript高級程序設計》的作者Nicholas Zakas寫的，本翻譯純屬為自己學習而做，僅供參考。原文鏈接：這里

在我的前一篇blog中，我介紹了在JavaScript中如何使用文件，具體重點放在如何獲得File對象。只有當用戶通過上傳或者拖拽的方式上傳了文件，這些對象才擁有文件的元數據。一旦你有了這些文件，下一步就是從這些文件中讀取數據。

FileReader 類型

FileReader類型有一個單一的工作，就是從一個文件中讀取數據並存儲在一個JavaScript變量中。它的API有意設計得與XMLHttpRequest相同，因為它們都是從一個外部資源（瀏覽器之外）加載數據。讀操作是異步的，這樣不會使瀏覽器堵塞。

FileReader可以創建多種格式來表示文件的數據，而當讀取文件時返回的格式是必須的。讀取操作是通過調用下面任一方法來完成的：

readAsText() – 使用純文本的形式返回文件內容
readAsBinaryString() – 使用加密二進制數據字符串的形式來返回文件內容（該方法已廢棄，請使用readAsArrayBuffer()代替）
readAsArrayBuffer() – 使用ArrayBuffer的形式來返回文件內容（對二進制數據比如圖像文件有用）
readAsDataURL() – 使用數據URL的形式返回文件內容

像XHR對象的send方法會發起一個Http請求一樣，上面的每個方法都會啟動一個文件讀取。就這一點來說，在開始讀取之前，你必須監聽load事件，event.target.result總是返回讀取的結果。例如：

demo.js

 
                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);

在這個例子中，我們簡單地讀取文件內容，並將內容以純文本的形式輸出到console。當文件被成功讀取時會調用onload操作，而因為某些原因無法讀取時會調用onerror操作。在事件處理器中可以通過event.target來獲得FileReader實例，而且它推薦這樣使用，而不是直接使用reader變量。result屬性包含讀取成功時的文件內容和讀取失敗時的錯誤信息。

讀取數據URI

你可以用差不多的方法來將文件讀取為一個數據URI，數據的URI（有時也叫數據URL）是個有趣的選項，比如你想要顯示從磁盤上讀取的圖像文件，你可以用下面的代碼這樣做：

demo.js

 
                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);

這段代碼簡單地在頁面上插入一個從磁盤上讀取來的圖像文件。因為這個數據URI包含了圖像的所有數據，所以它可以被直接傳給圖像的src屬性，並顯示在頁面上。你可以交替地加載圖像和將其繪制到一個<canvas>上：

demo.js

 
                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最普遍的用法是在web頁面中快速顯示文件內容。

讀取ArrayBuffers

ArrayBuffer類型[1]最初是作為WebGL的一部分被引進的。一個Arraybuffer代表一個有限的字節數，可以用來存儲任意大小的數字。讀取一個ArrayBuffer數據的方式需要一個特定的視圖，比如Int8Array是將其中的字節處理為一個有符號的8位整數集合，而Float32Array是將其中的字節處理為一個32位浮點數的集合。這些稱為類型數組[2]，這樣可以強制你工作在一個特定的數字類型上，而不是包含任意類型的數據（像傳統的數組）。

當處理二進制文件時你可以優先使用ArrayBuffer，這樣對數據可以有更細粒度的控制。要解釋關於ArrayBuffer的所有ins和outs已經超出本篇blog的范圍，你只需要知道在你需要的時候可以很容易地將一個文件讀取為一個ArrayBuffer就可以了。你可以直接傳一個ArrayBuffer到一個XHR對象的send()方法，發送原始數據到服務器（你會在服務器的請求中讀取這個數據去重建文件），只要你的瀏覽器完全支持XMLHttpRequest Level 2[3]（大部分最新的瀏覽器，包括IE10和Opera12都支持）。

下集預告

使用FileReader讀取文件數據相當簡單。如果你知道怎么使用XMLHttpRequest, 那么你肯定知道怎么從文件中讀取數據。在這個系列的下一章，你將學到更多有關如何使用FileReader事件和理解更多潛在錯誤的內容。