[轉]JavaScript檔案操作(2)-FileReader

標籤：

在上篇文章中,我介紹了在JavaScript操作檔案，重點講了如何取得File對象。 這些對象包含的檔案的中繼資料在上傳或者拖放到瀏覽器中時可以擷取到。有了檔案當然接下來就是讀取檔案了。

FileReader

FileReader 功能很簡單: 從檔案中讀取資料和儲存到JS變數中。此API特意設計成跟XMLHttpRequest 一樣因為都是從外部讀取資料。讀取過程都是非同步不會造成瀏覽器阻塞。

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

• readAsText() – 返迴文件內容的純文字格式
• readAsBinaryString() –返迴文件內容的二進位格式 (不推薦– 推薦使用 readAsArrayBuffer())
• readAsArrayBuffer() – 返迴文件內容的 ArrayBuffer 格式(圖片檔案推薦使用)
• readAsDataURL() – 返迴文件內容的 data URL格式

 

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

1234567891011

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 屬性包含有檔案的內容， success 和 error 包含有成功與失敗的資訊。

讀取 data URIs

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

1234567891011121314

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> 元素裡:

123456789101112131415161718

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

下期預告

通過FileReader 從檔案中讀取資料非常簡單。如果你會用 XMLHttpRequest那麼很容易學會從檔案中讀取資料。下期你將會學到更多 FileReader 相關事件和理解常見錯誤。

參考資料

1. ArrayBuffer
2. Typed Array Specification
3. XMLHttpRequest Level 2

 

原文：

http://www.iunbug.com/archives/2012/06/04/220.html

 

可參考：

http://blog.csdn.net/zk437092645/article/details/8745647

[轉]JavaScript檔案操作(2)-FileReader