最近项目中会使用富文本编辑器，发现源码中有fileReader，来学习一下~
FileReader的学习
FileReader是一种异步文件读取机制，结合input:file可以方便的读取本地文件(图片/txt)
一、input的file类型
<input type=“file” id = “inputBox”>
在页面上的显示是这样的：
当你点击选择文件的按钮，便可以选择本地的文件。选择后的页面如下所示，文字部分会显示你选择的文件名称。
我们在控制台试着输入 inputBox.files 将会看到：
为input标签加上webkitdirectory属性，可上传文件夹
<input type=“file” id = “inputBox” webkitdirectory>
例如:
我们可以看到，虽然file对象获取到了文件的描述信息，但没有办法获取到文件的数据。需要通过html5提供的FileReader读取文件中的数据。
fileReader
1.实例的创建 var reader = new FileReader();
2.FileReader的方法：
常用的两个方法在上图中圈出。我们来测试一下~
(1)readAsDataURL(file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img
{
width:200px;
}
</style>
最低0.47元/天 解锁文章
扫一扫
3392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
