简介
FileReader 对象提供了读取文件内容的，它允许网页通过异步方式读取用户计算机上的文件内容。
属性
error
在读取文件的过程中发生错误时，该属性包含一个错误对象。
readyState
表示 FileReader 状态的数字，表示以下值之一：
- 0 (EMPTY)：尚未初始化。
- 1 (LOADING)：正在读取。
- 2 (DONE)：已完成读取。
result
返回读取文件的 ArrayBuffer、Blob、DataURL 或 Text 格式。
方法
abort()
取消读取操作。在返回时，readyState 属性为 DONE。
readAsArrayBuffer(blob)
开始读取指定的 Blob 中的内容。一旦完成，result 属性中就包含一个 ArrayBuffer 对象。
readAsBinaryString(blob) 【已弃用】
开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含所读取文件的原始二进制数据。
readAsDataURL(blob)
开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的 Base64 字符串以表示所读取文件。
readAsText(blob, [encoding])
开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个字符串以表示所读取的文件。该字符串的编码格式与 charset 参数的值相同。
- encoding：字符编码， 默认值为 "UTF-8"
事件
onabort
当读取操作被中断时（比如用户取消文件读取操作），发生 abort 事件。
onerror
当读取操作发生错误时，发生 error 事件。
onload
当读取操作成功完成时，发生 load 事件。
onloadend
当读取操作完成（要么成功，要么失败），发生 loadend 事件。
onloadstart
当读取操作将要开始之前，发生 loadstart 事件。
onprogress
当读取操作正在进行中，发生 progress 事件。
示例
图片在线预览
用户在本地上传图片，在浏览器上实时预览。
<input type="file" name="file" accept="image/png, image/jpeg" />
<script>
const fileInput = document.querySelector('input[type="file"]');
const reader = new FileReader();
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
// 读取文件内容，返回格式为 DataURL
reader.readAsDataURL(file);
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
document.body.appendChild(img);
}
})
</script>