距离上一篇博客将近一个半月了,这一个多月有点烦躁,静不下心来学习,也不知道为什么,玩的也不算太好,还感冒。可能是天气热了吧,有点点躁动。上周看了《哪吒——魔童降世》还不错,还看了新出的《蜘蛛侠:英雄远征》,从彼得帕克身上看到了钢铁侠的影子,很是激动哦!
需求
为什么今天会想到写这个预览本地文件的博客呢,因为在工作中遇到了问题
需要上传图片在图片上传之前,需要展示出来图片之前的上传图片实现是图片上传成功以后返回url,然后根据url再展示图片
这就是目前需要实现的功能。要实现这个功能,我目前感觉必须要实现网页可以预览本地图片,因为图片在展示的时候根本还没有上传,并没有图片地址这一说
网上一搜,果然html5的强大体现出来的,有原生API就可以实现————FileReader。
FileReader方法
FileReader的实例拥有4个方法,其中3个是用来读取文件,另一个是用来中断读取(目前我没有用过这个方法 没有需求~)。我们需要注意的是不管读取成功或者失败,这几个方法都不会直接返回读取结果,而是在result
属性中(后面会提到)
abort
方法,参数none
,终端读取readAsBinaryString
方法,参数file
,将文件读取为二进制码readAsDataURL
方法,参数file
,将文件读取为DataURLreadAsText
方法,参数file, [encoding]
,将文件读取为文本
readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。(下面没用到。。。尴尬。。)
readAsDataURL:该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。(其实图片的话就是转成base64的格式)
FileReader事件
FileReader拥有提供了整个流程的事件模型,方便我们在读取文件的各个阶段来进行自己想执行的方法
onabort
,中断时触发onerror
,出错时触发onload
,文件读取成功完成时触发onloadend
,读取完成触发,无论成功或失败onloadstart
,读取开始时触发onprogress
,读取中
基本的流程就是呢~onloadstart
>onprogress
>onload
>onloadend
我们来使用
readAsDataURL
那我们就直接来上代码吧⬇️
<input type="file" id="file"><img src="" alt="" id="img">
我们现在需要的就是我们从<input type="file" id="file">
这个标签选择的图片在不经过请求上传就可以在下面的<img src="" alt="" id="img">
标签中展示出来
let reader = null; // 声明reader变量方便后面使用const fileNode = document.querySelector('#file'); // 获取input标签fileNode.addEventListener('change', (e) => {// 为获取的input标签添加事件监听,当选择文件以后触发if (window.FileReader) {// 判断浏览器中有没有FileReader,毕竟现在不是所有浏览器都有FileReaderreader = new FileReader(); // 实例化FileReaderreader.onload = (event) => {// 设置读取成功以后执行的方法document.querySelector('#img').src = event.target.result; // 前面说过,成功返回的数据再result属性中,然后将这个设置成img标签的src地址}} else {// 没有FileReader的弹出警告然后返回alert('你的先浏览器没有FileReader,不能这么干!');return;}const file = e.target.files[0]; // 拿到选择的文件信息reader.readAsDataURL(file); // 将文件信息转成DataUrl,这个就是转成功后执行 reader.onload 方法})
本地图片预览/video/1139918571667898368
这样我们就实现了不通过上传图片就可以在本地浏览图片了!
至此,我们用到了readAsDataURL
方法和onload
事件,下面我们再来看一下readAsText
,也就是读取文本。
readAsText
还是,我们先更改html
<input type="file" id="file"><div id="text"></div>let reader = null; // 声明reader变量方便后面使用const fileNode = document.querySelector('#file'); // 获取input标签fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听,当选择文件以后触发if (window.FileReader) { // 判断浏览器中有没有FileReader,毕竟现在不是所有浏览器都有FileReaderreader = new FileReader(); // 实例化FileReaderreader.onload = (event) => { // 设置读取成功以后执行的方法document.querySelector('#text').innerHTML = event.target.result; // 前面说过,成功返回的数据再result属性中,然后将拿回来的文本添加到指定标签中}} else { // 没有FileReader的弹出警告然后返回alert('你的先浏览器没有FileReader,不能这么干!');return;}const file = e.target.files[0]; // 拿到选择的文件信息reader.readAsText(file); // 将文件信息转成文本,默认是UTF-8格式,这个就是转成功后执行 reader.onload 方法})
新建一个txt的文件,别的文本文件应该也好使
预览本地文本/video/1139918696410636288
这样我们就实现了本地预览图片和文本的需求啦~
轻松一下
我们来课堂延伸一下,就是我们在获取图片的时候,其实是转成base64的格式,然后呈现在页面中的,那我们现在还有一个API可以让图片生成一个本地的地址,然后展现出来,那就是——URL.createObjectURL()
怎么用呢???让我们来看一下代码
这回我们的html有两个img标签,方便我们来对比
<input type="file" id="file"><img src="" alt="" id="img"><img src="" alt="" id="img2">let reader = null; // 声明reader变量方便后面使用const fileNode = document.querySelector('#file'); // 获取input标签fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听,当选择文件以后触发if (window.FileReader) { // 判断浏览器中有没有FileReader,毕竟现在不是所有浏览器都有FileReaderreader = new FileReader(); // 实例化FileReaderreader.onload = (event) => { // 设置读取成功以后执行的方法document.querySelector('#img').src = event.target.result; // 前面说过,成功返回的数据再result属性中,然后将这个设置成img标签的src地址}} else { // 没有FileReader的弹出警告然后返回alert('你的先浏览器没有FileReader,不能这么干!');return;}const file = e.target.files[0]; // 拿到选择的文件信息/* 这里是我们用的URL.createObjectURL() */document.querySelector('#img2').src = URL.createObjectURL(file) // 我们直接通过URL.createObjectURL()这个方法来把文件信息转成一个url地址/* end */reader.readAsDataURL(file); // 将文件信息转成DataUrl,这个就是转成功后执行})
预览本地图片url/video/1139918810411933696
结语
现在我们可以实现本地预览图片、文本,以及可以生成url来预览的需求了。
往后我还会继续更新博客,记录自己在学习过成功遇到的小问题,或者学习到的新技能
我是前端战五渣,一个前端界的小学生。