FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容。

构造函数：

FileReader() 构造函数返回一个新构造的 FileReader。

const reader = new FileReader()

属性：

1. error：只读属性，表示在读取文件时发生的错误 。

2. readyState：只读属性，表示FileReader状态的数字。

   1. 0/EMPTY：还没有加载任何数据。

   2. 1/LOADING：数据正在被加载。
   3. 2/DONE：已完成全部的请求读取。

3. result：只读属性，表示文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

方法：

1. abort()：中止读取操作。在返回时，readyState属性为DONE。
2. readAsArrayBuffer()：开始读取指定的 Blob中的内容。一旦完成， result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
3. readAsBinaryString() ：开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
4. readAsDataURL()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
5. readAsText()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

事件：

1. onabort：处理 abort 事件。该事件在读取操作被中断时触发。
2. onerror：处理 error 事件。该事件在读取操作发生错误时触发。
3. onload：处理 load 事件。该事件在读取操作完成时触发。
4. onloadstart：处理 loadstart 事件。该事件在读取操作开始时触发。
5. onloadend：处理 loadend 事件。该事件在读取操作结束时（要么成功，要么失败）触发。
6. onprogress：处理 progress 事件。该事件在读取 Blob 时触发。

<input type="file"/>

const input = document.querySelector('input[type=file]')
input.addEventListener('change', ()=>{
  const reader = new FileReader()
  reader.readAsText(input.files[0],'utf8') // input.files[0]为第一个文件
  reader.onload = ()=>{
    document.body.innerHTML += reader.result  // reader.result为获取的结果
  }
})