/

FileReader物件

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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//..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元素上傳文本檔時，讀取檔案內容並將內容打印到控制台：

1
<input type="file" allow="text/*" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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屬性：

1
2
3
4
5
6
7
8
9
10
//..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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//..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)

tags: [“FileReader”, “asynchronous”, “read methods”]