FileReader对象

The FileReader object asynchronously reads the content of a file.

FileReader对象异步读取文件的内容。

It exposes those 4 reading methods we can use to start a reading process:

它展示了我们可以用来开始阅读过程的四种阅读方法：

• readAsText()

  readAsText()

• readAsDataURL()

  readAsDataURL()

• readAsArrayBuffer()

  readAsArrayBuffer()

• readAsBinaryString()

  readAsBinaryString()

and an abort() method to halt any reading operation.

和abort()方法来停止任何读取操作。

Reading the file is asynchronous, and the object exposes several events we can hook into to follow the progress of the operation:

读取文件是异步的，并且该对象暴露了一些我们可以挂钩以跟踪操作进度的事件：

• onload triggered when the reading successfully ends

  读取成功结束时触发onload

• onloadstart triggered when the reading starts

  读取开始时触发onloadstart

• onprogress triggered when the reading is on progress

  正在进行阅读时触发onprogress

• onloadend triggered when the reading ends, successfully or not successfully

  读取成功或不成功时触发onloadend

• onerror triggered when an error occurs

  错误发生时触发onerror

• onabort triggered when the reading is aborted

  读取onabort终止时触发onabort

Once a reading operation is completed, the result property of FileReader contains the file content.

读取操作完成后，FileReader的result属性将包含文件内容。

The error property contains the error message, if an error occurred, and readyState contains the state of the operations - 0 if no data is loaded, 1 if data loading is in progress, and 2 if the loading has finished.

error属性包含错误消息(如果发生错误)， readyState包含操作的状态-如果未加载任何数据，则为0 ，如果正在进行数据加载，则为1 ，如果加载已完成，则为2 。

readAsText() (readAsText())

Loads the content of a blob in a text string.

将blob的内容加载到文本字符串中。

In this example we use that text and put it into the #content element’s inner HTML:

在此示例中，我们使用该文本并将其放入#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)

Here’s an example that reads the content of a text file when it’s uploaded using an input element, and prints its content to the console:

这是一个示例，该示例使用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() (readAsDataURL())

Loads the content of a blob into a Data URL.

将Blob的内容加载到Data URL中 。

//..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() (readAsArrayBuffer())

Loads the content of a blob into an ArrayBuffer.

将Blob的内容加载到ArrayBuffer 。

//..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)

翻译自: https://flaviocopes.com/filereader/