JavaScript檔案處理第二部分：檔案讀取

在我的前一篇blog中，我介紹了在JavaScript中如何使用檔案，具體重點放在如何獲得File物件。只有當使用者通過上傳或者拖拽的方式上傳了檔案，這些物件才擁有檔案的後設資料。一旦你有了這些檔案，下一步就是從這些檔案中讀取資料。

FileReader 型別

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

FileReader可以建立多種格式來表示檔案的資料，而當讀取檔案時返回的格式是必須的。讀取操作是通過呼叫下面任一方法來完成的：

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

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

讀取資料URI

你可以用差不多的方法來將檔案讀取為一個資料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);

這段程式碼簡單地在頁面上插入一個從磁碟上讀取來的影像檔案。因為這個資料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最普遍的用法是在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都支援）。