anguarjs 上传图片预览_前端战五渣学前端——FileReader预览本地文件
距离上一篇博客将近一个半月了,这一个多月有点烦躁,静不下心来学习,也不知道为什么,玩的也不算太好,还感冒。可能是天气热了吧,有点点躁动。上周看了《哪吒——魔童降世》还不错,还看了新出的《蜘蛛侠:英雄远征》,从彼得帕克身上看到了钢铁侠的影子,很是激动哦!
需求
为什么今天会想到写这个预览本地文件的博客呢,因为在工作中遇到了问题
- 需要上传图片
- 在图片上传之前,需要展示出来图片
- 之前的上传图片实现是图片上传成功以后返回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 方法
})
本地图片预览https://www.zhihu.com/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的文件,别的文本文件应该也好使
预览本地文本https://www.zhihu.com/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,这个就是转成功后执行
})
预览本地图片urlhttps://www.zhihu.com/video/1139918810411933696
结语
现在我们可以实现本地预览图片、文本,以及可以生成url来预览的需求了。
往后我还会继续更新博客,记录自己在学习过成功遇到的小问题,或者学习到的新技能
我是前端战五渣,一个前端界的小学生。
anguarjs 上传图片预览_前端战五渣学前端——FileReader预览本地文件相关推荐
- ashx获取input file 文件_前端战五渣学前端——FileReader预览本地文件
距离上一篇博客将近一个半月了,这一个多月有点烦躁,静不下心来学习,也不知道为什么,玩的也不算太好,还感冒.可能是天气热了吧,有点点躁动.上周看了<哪吒--魔童降世>还不错,还看了新出的&l ...
- 前端战五渣学前端——跨域
跨域(Cross-Origin) 这几年的工作.面试中,还遇到一个不能回避的问题,那就是跨域,一般面试的时候会问你'怎么解决跨域问题','跨域是什么','为什么会有跨域'等类似的问题.前段时间后端大佬 ...
- 前端战五渣学JavaScript——防抖、节流和rAF
看了<JavaScript高级程序设计>和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖和节流的概念取决于多数人的概念吧,并且基于伦敦前端工程师David Cor ...
- 前端战五渣学JavaScript——call、apply以及bind
写这篇博客之前,我想先说下今天(2019年3月28日)一直关注的一件事吧(出于凑热闹的心情--尴尬).在昨天,全球最大交友网站Github上悄然出现一个名为996.ICU的文档项目,整个项目没有代码, ...
- 前端战五渣学JavaScript——闭包
就决定是你了--闭包 有不少开发人员总是搞不清匿名函数和闭包两个概念,因此经常混用.闭包是指有权访问另一个函数作用域中的变量的函数.创建闭包的常见方式,就是在一个函数内部创建另一个函数. ------ ...
- 前端战五渣学JavaScript——Promise
我是要成为海贼王的男人 悟空已成神,鸣人已成影,待路飞成王之时,便是我青春结束时! 悟空陪布玛找寻龙珠,一路拳打比克.斩弗利萨,生个儿子战沙鲁,最后净化布欧,只因承诺要保护地球.鸣人"有话直 ...
- 前端战五渣学JavaScript——void 运算符
最近有点忙,公司有个新项目要尽快上线,所以工作时间很长,没有太多的时间去学习和总结,所以博客也没空更新了.但是充足的工作量让自己觉得很充足,沉淀的知识也有了用武之地,还不错.今天就写写这两天突然想到的 ...
- 前端战五渣学JavaScript——前端数据存储
说起前端数据存储,那就不得不提到Cookie.sessionStorage和localStorage,这是我们接触到的最熟悉的前端数据存储的单词,作为一个前端开发.前端工程师,这三个单词用没用过先不管 ...
- 前端战五渣学React——JSX React.createElement() React.ReactElement()源码
最近<一拳超人>动画更新第二季了,感觉打斗场面没有第一季那么烧钱了,但是剧情还挺好看的,就找了漫画来看.琦玉老师真的厉害!!!打谁都一拳,就喜欢看老师一拳把那些上来就吹牛逼的反派打的稀烂, ...
- 不同手机型号图文预览_分分钟教你使用手机预览原型图(MAC版)
在网上看了很多人都使用EasyWebSvr做一个本地服务器,然后将做好的原型文件装进去,手机打开浏览器就可以预览原型图啦~ 但是MAC系统没有EasyWebSvr怎么办? 不用担心,很简单~ 步骤 设 ...
最新文章
- 开发人员学Linux(4):使用JMeter对网站和数据库进行压力测试
- python【力扣LeetCode算法题库】10-正则表达式匹配
- 2019年——欢度中秋,喜迎国庆
- html导入错误 wordpress,纯代码为WordPress压缩前端html代码 附BUG修复
- 17、任务十六——事件委托机制、简单表单验证
- 和我一起学 Selenium WebDriver
- DotNetCore跨平台~配置文件与配置代码如何共存
- 集合与泛型集合与键值对集合
- 【README3】动态规划之“找零钱”说明最优子结构怎么解决
- 初学 Delphi 嵌入汇编[27] - XCHG 指令: 交换寄存器的内容
- python使用-使用python进行数据清洗
- 天锐绿盾屏幕监控,违规操作全记录
- 决策树中的基尼系数、 熵之半和分类误差率
- iOS实现炫酷悬停交互视图
- Android播放器实现横竖屏切换
- 【读书笔记】【未】杀死一只知更鸟
- TweenMax学习笔记整理
- PMP章节练习(第六章:项目进度管理)
- @4-1 CCF 2020-06-1 线性分类器
- python- 按指定列值筛选数据
热门文章
- 人人都是架构师:分布式系统架构落地与瓶颈突破 - china-pub网上书店
- CodeForces - 1538G Gift Set - ( 二分 )
- PDF文件编辑指南4:PDF文档加密和移除PDF文档密码方法
- Silverlight MMORPG WebGame游戏设计(五)-----Client的嫁妆
- 学习B站UP雨落弦鸣的《超简单效果超好的个人网站博客搭建(对小白很友好)》中遇到的问题
- Ubuntu14.10 更新源
- python math 数学函数教程
- 判断一个整数能否同时被3和5整除
- php strtolower 大写,PHP strtolower()用法及代码示例
- VMware安装Linux详细教程