生活随笔
收集整理的这篇文章主要介绍了
fileReader学习-前端展示本地图片
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
最近项目中会使用富文本编辑器，发现源码中有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>
</head>
<body>
<input type="file" name="" id="inputBox">
<br/>
<img src="" id="img">
<span id="span"></span>
<script language="javascript">var inputBox = document.getElementById("inputBox");inputBox.addEventListener("change",function(){var reader = new FileReader();reader.readAsDataURL(inputBox.files[0]);reader.onload = function(){img.src = this.resultconsole.log(this.result)}})
</script>
我们先看一下控制台打印出来的result是怎么样的
输出的是文件的base64编码
将这个结果赋给img.src,即可在页面中展示出本地图片了，效果如下
(2)readAsText(file,encoding)
其中，encoding的默认值为“UTF-8”。这个用法与上例类似
var inputBox
= document
.getElementById("inputBox");inputBox
.addEventListener("change",function(){var reader
= new FileReader();reader
.readAsText(inputBox
.files
[0]);reader
.onload = function(){var span
= document
.getElementById("span")span
.append(this.result
);console
.log(this.result
)}})
3.FileReader的事件
var inputBox
= document
.getElementById("inputBox");var count
=0;inputBox
.addEventListener("change",function(){var reader
= new FileReader();reader
.readAsText(inputBox
.files
[0],"utf-8");reader
.onload = function(){console
.log("加载成功")}reader
.onloadstart = function(){console
.log("开始加载")}reader
.onloadend= function(){console
.log("加载结束")}reader
.onprogress = function(){count
++;console
.log("加载中"+count
)}})
我们来读取一下一个比较大的文件 来看一下加载过程是怎么样的~
我们可以看到,事件的顺序为 onloadstart–>onprogress(周期性执行)–>onload–>onloadend(无论成功还是失败，都回调用)
总结
以上是生活随笔为你收集整理的fileReader学习-前端展示本地图片的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
