FileReader物件

了解什麼是FileReader物件以及如何使用它

FileReader物件以非同步方式讀取檔案的內容。

它提供了四個讀取方法，可以用來開始讀取過程：

readAsText()：以文字字串形式讀取內容
readAsDataURL()：將內容以數據URL形式讀取
readAsArrayBuffer()：將內容讀取為ArrayBuffer
readAsBinaryString()：以二進制字串形式讀取內容

另外還有一個abort()方法，用來停止任何的讀取操作。

讀取檔案是非同步的，該物件還提供了一些事件，我們可以利用這些事件來追蹤操作的進度：

onload：當讀取成功結束時觸發
onloadstart：當讀取開始時觸發
onprogress：當讀取進行中時觸發
onloadend：無論讀取是否成功結束都會觸發
onerror：當發生錯誤時觸發
onabort：當讀取被中止時觸發

一旦讀取操作完成，FileReader物件的result屬性將包含檔案的內容。

error屬性包含錯誤訊息（如果有錯誤發生），而readyState則包含操作的狀態編號。狀態編號為:

0：未載入任何資料
1：資料載入中
2：載入完成

`readAsText()`

以文字字串形式載入blob的內容。

以下是一個範例，將文字放入#content元素的內部HTML：

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => {
 const text = reader.result
 document.getElementById('content').innerHTML = text
}

reader.onerror = (e) => {
 console.error(e)
}

reader.readAsText(file)

以下是一個範例，當使用input元素上傳文本檔時，讀取檔案內容並將內容打印到控制台：

<input type="file" allow="text/*" />

const input = document.querySelector('input')

input.addEventListener('change', e => {
 const reader = new FileReader()

 reader.onload = event => {
 const text = reader.result
 console.log(text)
 }

 reader.onerror = (e) => {
 console.error(e)
 }

 reader.readAsText(input.files[0])
})

`readAsDataURL()`

將blob的內容以數據URL形式讀取。

以下是一個範例，將內容以數據URL形式設定到#image元素的src屬性：

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => {
 const dataURL = event.target.result
 document.getElementById('image').src = dataURL
}

reader.readAsDataURL(file)

`readAsArrayBuffer()`

將blob的內容讀取為ArrayBuffer。

以下是一個範例，將內容讀取為ArrayBuffer並創建一個Int32Array：

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => {
 const buffer = reader.result
 const data = new Int32Array(buffer)
 //...
}

reader.onerror = (e) => {
 console.error(e)
}

reader.readAsArrayBuffer(file)

readAsText()#

readAsDataURL()#

readAsArrayBuffer()#

`readAsText()`

`readAsDataURL()`

`readAsArrayBuffer()`