JAVASCRIPT網頁應用程式設計

110

|

第七章

onerror

如果發生錯誤，會觸發此事件

onprogress

讀取資料的過程中，會持續的觸發此事件

onload

如果讀得到檔案裡的資料，會觸發此事件

使用

FileReader

的步驟，是建立實體、新增事件，然後選用其中一組讀取檔案內容的函

式。

onload

事件內含一個

result

屬性，透過這個屬性就可拿到被讀取出來的檔案內容

（格式需依選用的函式而定）：

var reader = new FileReader();

reader.onload = function(e) {

var data = e.target.result;

};

reader.readAsDataURL(file);

舉例來說，如果想要顯示某張圖檔的縮圖，可以拿上面這段範例程式裡的

data

變數，

當做是圖片標籤的

src

屬性值：

var preview = $("img#preview")

// 檢查檔案類型，確認是否為圖檔

// 並檢查檔案是否過大，避免在預覽時讓瀏覽器發生問題

if (file.type.match(/image.*/) &&

file.size < 50000000) {

var reader = new FileReader();

reader.onload = function(e) {

var data = e.target.result;

preview.attr("src", data);

};

reader.readAsDataURL(file);

}

二進位物件（Blob