JavaScript文件操作-FileReader

FileReader

FileReader 功能很簡單: 從文件中讀取數據和保存到JS變量中。此API特意設計成跟XMLHttpRequest 一樣因為都是從外部讀取數據。讀取過程都是異步的不會造成瀏覽器阻塞。

FileReader 可以返回幾種格式來文件數據的格式， 而且這些格式在讀取文件時是必須的。通過以下幾個方法可以宣告讀取完畢：

• readAsText() – 返回文件內容的純文本格式
• readAsBinaryString() –返回文件內容的二進制格式 (不推薦– 推薦使用 readAsArrayBuffer())
• readAsArrayBuffer() – 返回文件內容的 ArrayBuffer 格式(圖片文件推薦使用)
• readAsDataURL() – 返回文件內容的 data URL格式

 

這些格式都應在文件讀取操作前初始化好比 XHR 對象的 send()方法前要初始化一個 HTTP 請求一樣。同樣的，開始讀取之前你還是要監聽 load 事件。讀取的結果從 event.target.result 獲取。例如：

ar 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 屬性包含有文件的內容， success 和 error 包含有成功與失敗的信息。

讀取 data URIs

讀取 data URI 的步驟大致相同。Data URIs (有時稱 data URLs) 有時是個不錯的選擇，比如，直接顯示從硬盤上讀到的圖片 ，案例參考：

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 包含有整個圖片的內容，可以直接賦值給一個Image對象的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 對象，然后將其畫入一個canvas中（高寬各100）。

Data URIs 通常都這么用， 且可以用於任何類型的文件。最廣泛的用法就是將文件一邊讀為data URI的同時一邊在頁面上即時顯示。

讀取 ArrayBuffers

ArrayBuffer 格式^[1] 作為WebGL的一部分首次提出的。ArrayBuffer 表示將任意大小的字節數用一定的字節數來存儲。此方式即是通過特定的視圖來從 ArrayBuffer 讀取數據，比如 Int8Array， 底層為 8 位有符號整型的集合，再如 Float32Array,  底層為32 位浮點數的集合。 這些諧稱為類型化數組^[2]，這樣容易迫使你使用一定的字節數來存儲而不是無限字節數（即傳統的數組）。

你可能將一個 ArrayBuffer 主要用於處理二進制的文件， 以便更細粒度的操作數據。在這里討論 ArrayBuffer 的方方面面完全超出了的本文的范圍，只要知道將文件讀成 ArrayBuffer格式是非常簡單的即可。你可隨時將 ArrayBuffer 通過 XHR 對象的 send() 方法到服務器端 (然后在后端將數據重建)，只要你的瀏覽器完整支持XMLHttpRequest Level 2^[3] (各大瀏覽器的最新版都支持的包括IE10和Opera 12).

 

原文地址：http://www.iunbug.com/archives/2012/06/04/220.html