网站首页 > 技术文章正文

前端小技巧:使用FileReader对象读取文件内容

nanyue 2024-10-10 07:26:47 技术文章 7 ℃

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的回调函数如下：

实例读取大文件小练习：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<input type="file" onchange="read(event)">
<script>
 let pre=0,now;
 function read(e){
 let file=e.target.files[0]; //获取File对象
 let reader=new FileReader(); //创建FileReader对象实例
 reader.readAsText(file,"utf-8");//读取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("正在加载当中"+(now - pre));//统计onprogress回调函数调用时间间隔
 pre=now;
 }
 }
</script>
</body>
</html>

最后读取结果如下：

结果分析：我们可以发现，回调函数的执行顺序分别为onloadstart（开始加载），onprogress（正在加载），onload（加载成功），onloadend（加载结束），其中onprogress回调函数大概每50ms调用一次，我们可以利用这个函数特性来做一个progress可视化的进度条界面（大家可以自己做一做）。

3.总结

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

注意：在读取数据内容过程中，无论是触发abort(暂停)，error(读取错误)还是load(加载)事件，最后都会触发loadend（加载结束）事件。

这里是【IT人一直在路上】，关注我，学习更多前端技术，一起从小白走向高级工程师。

上一篇：前端文件数据格式那些事儿（前端文件后缀）
下一篇： js的filereader方法的onload事件（js中file）

网站首页 > 技术文章 正文

前端小技巧:使用FileReader对象读取文件内容

1.前置知识

2.FileReader对象用法详解

3.总结

猜你喜欢

网站首页 > 技术文章正文