1.前置知识
前面和大家介绍过了HTML5中的Blob对象和File对象（不清楚的可以看我上一篇文章），我们知道Blob对象和File对象其实就是二进制数据的容器，但是它无法读取数据的具体内容，只能进行一些剪切操作。因此本文对具有读取Blob和File对象数据内容功能的FileReader对象进行介绍。
2.FileReader对象用法详解
2.1FileReader对象的作用
上面提到，FileReader的主要作用是将文件内容读取到内存当中，然后调用对象的一些异步API接口访问本地文件的内容。
2.2FileReader对象的用法
使用FileReader对象分三步走：
- 创建FileReader实例
let reader=new FileReader();
- 读取Blob或者File对象的数据内容
读出的结果表示形式有很多种，这里以返回字符串为例：
reader.readAsText(file,"utf-8");
- 设置回调函数
这里以读取成功的回调函数为例：
reader.onload=function () {
console.log(reader.result);//读取结果放在result属性中
}
创建实例没什么好说的，着重看一下读取方式和回调函数。
- FileReader的读取方式如下：
- FileReader的回调函数如下：
实例读取大文件小练习：
Title
最后读取结果如下：
结果分析：我们可以发现，回调函数的执行顺序分别为onloadstart（开始加载），onprogress（正在加载），onload（加载成功），onloadend（加载结束），其中onprogress回调函数大概每50ms调用一次，我们可以利用这个函数特性来做一个progress可视化的进度条界面（大家可以自己做一做）。
3.总结
Blob和File对象帮我们存储数据内容，FileReader对象帮我们获取文件的数据内容。
注意：在读取数据内容过程中，无论是触发abort(暂停)，error(读取错误)还是load(加载)事件，最后都会触发loadend（加载结束）事件。
这里是【IT人一直在路上】，关注我，学习更多前端技术，一起从小白走向高级工程师。
分享到:
