onthelist新加坡（新加坡my first skool）

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;

设置回调函数

这里以读取成功的回调函数为例：

reader.onload=function { console.log;//读取结果放在result属性中 }

创建实例没什么好说的，着重看一下读取方式和回调函数。

FileReader的读取方式如下：FileReader的回调函数如下：

实例读取大文件小练习：

<!DOCTYPE html><html lang=\\\”en\\\”><head> <meta charset=\\\”UTF-8\\\”> <title>Title</title></head><body><input type=\\\”file\\\” onchange=\\\”read\\\”><script> let pre=0,now; function read{ let file=e.target.files[0]; //获取File对象 let reader=new FileReader; //创建FileReader对象实例 reader.readAsText;//读取File对象数据内容并存到Reader对象的result属性中去 reader.onload = function{ console.log } reader.onloadstart = function{ console.log } reader.onloadend= function{ console.log } reader.onprogress = function{ now=new Date; console.log);//统计onprogress回调函数调用时间间隔 pre=now; } }</script></body></html>

蕞后读取结果如下：

结果分析：我们可以发现，回调函数的执行顺序分别为onloadstart，onprogress，onload，onloadend，其中onprogress回调函数大概每50ms调用一次，我们可以利用这个函数特性来做一个progress可视化的进度条界面。

3.总结

Blob和File对象帮我们存储数据内容，FileReader对象帮我们获取文件的数据内容。

注意：在读取数据内容过程中，无论是触发abort，error还是load事件，蕞后都会触发loadend事件。