最近项目中会使用富文本编辑器，发现源码中有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.result//读取完成后，数据保存在对象的result属性中console.log(this.result)}})
</script>

我们先看一下控制台打印出来的result是怎么样的

输出的是文件的base64编码
将这个结果赋给img.src,即可在页面中展示出本地图片了，效果如下

(2)readAsText(file,encoding)
其中，encoding的默认值为“UTF-8”。这个用法与上例类似

//读取txt类型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);//读取完成后，数据保存在对象的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学习-前端展示本地图片相关推荐

Python 技术篇-用smtplib和email库实现邮件发送并展示本地图片实例演示
qq账号发送邮箱登陆密码需要用授权码. 可以看我的这个文章: Python 技术篇-qq邮箱授权码开通实现原理将本地图片加入到邮件的附件中. m_img.add_header('Content-I ...
fastreport打印指定路径图片显示不出来_报表工具中图片文件怎么展示---本地图片--网络图片--数据库图片...
用于报表展示的图片来源有多种,如:数据库的图片字段.服务器本地图片.网络图片等,因此,报表工具也针对多种图片来源提供了多种多样的处理方式. 下面从不同的图片来源角度,举例介绍报表工具如何设置呈现. 图 ...
IDEA设置虚拟路径 - 解决前端展示本地磁盘图片问题
Windows系统下,使用idea开发项目时,遇到了一个问题! 问题:将数据库中存储的图片查询出来,并在前端进行展示,但显示失败!! 这是图片在本地磁盘中的存储地址这是数据库中存储的图片地址(相对地 ...
Python 图像处理篇-利用opencv库展示本地图片实例演示
python 常用的图像处理技术有两种方法,一种是 opencv,另一种是 pytesseract. opencv 进行图像处理的话,我们需要安装 opencv-python 和 numpy 这两个库 ...
vue 展示本地图片三种方法
第一种:直接写两个都可以如果@配置了的话 <img src="../assets/img/mapchange/map1.png" alt=""> ...
前端访问不到本地图片，IDEA设置Tomcat虚拟路径
案例说明:数据库可以存储图片,但是相当耗费内存,怎么办呢?在数据库中存储图片的相对路径,访问资源时使用相对路径访问. 两种方法 1:图片存储在项目内,使用相对路径访问,该方法使用简单,但是,这样会造成 ...
spring boot配置虚拟路径(替代docBase配置)访问本地图片
以前使用SSM框架开发web项目时,访问本地磁盘图片的虚拟路径可以在Tomcat的service.xml文件中进行配置,具体可看我的另一篇文章:IDEA设置虚拟路径,解决前端展示本地磁盘图片问题!
vue使用v-for遍历本地图片不显示
vue使用v-for遍历本地图片不显示的问题 1.项目中本地有一组图片需要循环遍历展示,在使用v-for遍历之后发现无法展示图片,解决方法如下. 2.首先,正常的图片路径如下,但是想要展示不能按正常的 ...
java的图片上传与前端展示实例（Servlet+Jsp）
java的图片上传与前端展示实例(Servlet+Jsp) 内容前瞻 1.关于路径 2.前端图片上传与展示 3.后台获取并保存环境 1.前端jsp 2.服务器tomcat 3.服务端servlet ...

fileReader学习-前端展示本地图片

FileReader的学习

一、input的file类型

fileReader

fileReader学习-前端展示本地图片相关推荐

最新文章

热门文章