建立與讀取 Blob檔案

除了直接讀取作業系統的檔案,你也可以自行透過 JavaScript 於記憶體建立檔案以儲存特定的內容,要完成相關的操作必須依賴 Blob 物件。我們透過 new 關鍵字建立 Blob 物件如下:

var b = new Blob() ; 

這會建立一個空的 Blob 物件,如果你要包裝資料至 Blob 物件當中,可以採用以下的語法:

var b =new Blob(data,type) ; 

第一個參數 data 為所要儲存的資料,例如一個字串陣列,第二個參數 type 為所要儲存的資料型態,例如有兩個字串要儲存,可以寫下以下的程式碼:

var b =new Blob(['AAA', 'BBB'],{ 'type': 'text/plain'}) ; 

第一個參數是包含兩個字串的陣列,第二個參數則標示此為純文字格式資料,這是一個物件格式的內容,物件名稱為 type ,值為純文字格式的 MIME 對應格式。完成 Blob 物件的建立,我們就能夠利用 FileReader 對其進行讀取,這一部份前述課程已經作過說明,以下來看另外一個範例。

這個網頁範例純粹作為說明,沒有任何畫面,首先將一段字串儲存至新建立的 Blob 物件中,然後再透過 FileReader 將其讀出來附加上說明文字,輸出控制台,其中的 JavaScript 如下:

<script>
    var file = new Blob(
        ['HTML5 規格 2014 年底定 !'],
        { 'type': 'text/plain' });
    var fileReader = new FileReader();
    fileReader.onload = function (event) {
        console.log('新建 Blob 檔案內容:'+this.result);
    } ;
    s = fileReader.readAsText(file);
</script>

首先透過 new 關鍵字建立一個 Blob 物件,並且將一個字串陣列當作參數儲存於其中,同時指定其型態為純文字格式。緊接著建立 FileReader 物件,並且設定其 onload 事件,一旦檔案讀取作業完成,即將讀取的內容輸出於控制台。最後調用 readAsText() 讀取檔案的內容。

在瀏覽器上面,可以看到這個範例的執行結果如下:


開啟控制台會看到輸出的結果字串,請自行與上述的程式進行比對,可以看到我們輸出了 Blob 物件中所儲存的字串。

P.S. 本篇文章所討論的內容,之前是由 BlobBuilder 物件負責提供所需的功能,不過目前這個物件已經被 W3C 棄置以本文的 Blob 取代。


3 則留言:

陳傳興 提到...

老師,可以建議一下。

未來文章如果是書中資料的"更新版本"或"補充版本",是否可以在文章註解一下對應的是書中第幾章第幾小節。

這樣我們可以快速在書裡寫上註解。

祝 老師,教師節快樂

謝謝

康廷數位文教網 提到...

好的,謝謝你的留言

沒問題的,以後的文章我會加上參考說明
如果是新內容的文章也會註明
舊文部份我再找時間逐一補上

:)

陳傳興 提到...

辛苦老師了。 ^_^