FileReader

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

藉由 FileReader 物件,Web 應用程式能以非同步(asynchronously)方式讀取儲存在用戶端的檔案(或原始資料暫存)內容,可以使用 FileBlob 物件指定要讀取的資料。

File 物件可以從使用者於 <input> 元素選擇之檔案所回傳的 FileList 物件當中取得,或是來自拖放操作所產生的 DataTransfer 物件之中,也能由 HTMLCanvasElement 物件(元素物件)執行 mozGetAsFile() 方法後回傳。

备注: 此功能可在 Web Worker 中使用。

建構式

FileReader()

建立新的 FileReader 物件。

請參考在網頁應用程式中使用本地檔案的更多細節與範例。

屬性

FileReader.error Read only

DOMException 類型的物件記錄了讀取資料時發生的錯誤資訊。

FileReader.readyState Read only

表示目前 FileReader 狀態的數字,其代表的意義為:

EMPTY 0 尚未讀入任何資料。
LOADING 1 正在讀入資料。
DONE 2 完成資料讀取。
FileReader.result Read only

讀入的資料內容。只有在讀取完成之後此屬性才有效,而資料的格式則取決於是由哪一個方法進行讀取。

事件處理器

FileReader.onabort

abort 事件處理器,於讀取被中斷時觸發。

FileReader.onerror

error 事件處理器,於讀取發生錯誤時觸發。

FileReader.onload

load 事件處理器,於讀取完成時觸發。

FileReader.onloadstart

loadstart 事件處理器,於讀取開始時觸發。

FileReader.onloadend

loadend 事件處理器,於每一次讀取結束之後觸發(不論成功或失敗),會於 onloadonerror 事件處理器之後才執行。

FileReader.onprogress

progress 事件處理器,於讀取 Blob 內容時觸發。

備註: FileReader 物件繼承自 EventTarget,其所有的事件也都能夠透過 addEventListener 方法來註冊事件監聽器。

方法

FileReader.abort()

中斷目前的讀取,此方法回傳後屬性 readyState 將會是 DONE

FileReader.readAsArrayBuffer()

開始讀取指定的 Blob,讀取完成後屬性 result 將以 ArrayBuffer 物件來表示讀入的資料內容。

FileReader.readAsBinaryString() Non-standard

開始讀取指定的 Blob,讀取完成後屬性 result 將以字串型式來表示讀入的原始二進位資料(raw binary data)。

FileReader.readAsDataURL()

開始讀取指定的 Blob,讀取完成後屬性 result 將以 data: URL 格式(base64 編碼)的字串來表示讀入的資料內容。

FileReader.readAsText()

開始讀取指定的 Blob,讀取完成後屬性 result 將以文字字串型式來表示讀入的資料內容。

規範

Specification
File API
# APIASynch

瀏覽器相容性

BCD tables only load in the browser

參見