JS中利用FileReader实现上传图片前本地预览功能


Posted in Javascript onMarch 02, 2018

引子

      平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所以比较好的是上传之前先在本地预览一下。

      之前做项找插件的时候就知道纯前端可以实现图片本地预览,可今天面试的时候被问到时竟然一脸懵逼,然后竟然无意中就在电脑桌面发现了实现的demo,然后根据demo查了一下API,稍微总结下:

首先得拿到File对象

      当用input标签上传图片时event对象中会包含file对象的一个集合

event.target.files

核心是FileReader对象

根据MDN上的说法:

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

首先要作为构造函数得到一个FileReader的实例对象

var freader = new FileReader();

利用readAsDataURL()方法读取指定的内容

freader.readAsDataURL(file);

最后就是一个事件处理,相当于监控读取进度,我们这里是当读取完成时渲染图片,所以用onload

freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }

这里架加载完成之后最终得到的是一个base64编码的src地址,具体为什么下次查清楚了再专门写篇关于base64编码的文章

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form action=""> 
 <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)"> 
 <img alt="暂无图片" id="myImg" src="" height="100px" width="100px"> 
 </form>
 <script>
 function changImg(e){ 
 var myImg = document.getElementById('myImg');
 for (var i = 0; i < e.target.files.length; i++) { 
 var file = e.target.files[i]; 
 console.log(file); 
 if (!(/^image\/.*$/i.test(file.type))) { 
  continue; //不是图片 就跳出这一次循环 
 } 
 //实例化FileReader API 
 var freader = new FileReader(); 
 freader.readAsDataURL(file); 
 freader.onload = function(e) { 
  console.log(e);
  myImg.setAttribute('src', e.target.result); 
 } 
 } 
 }
 </script>
</body>
</html>

后记

      通过这件事就暴露了我学习新东西的一个问题,就是查出来看一遍觉得知道了就行了,这种习惯是特别害人的,以后每当有个疑问查出来之后不仅要查是怎么做的,还要了解一下为什么可以这么做,所谓知其然知其所以然。还有就是平时的代码能用手敲的尽量别复制,复制一时是爽了,可要手写的时候写不出来也是听尴尬的。

      今天是来杭州的第三天,面试的第二天,这两天的面试中暴露出的一个重要问题就是平时太依赖搜索引擎,用脑太少,连一些简单API就没记全,前端确实还是有很多东西就是要牢牢记住的,没什么捷径可走,这些东西就是基础,没记住就是基础差。虽然你并不影响你做出东西来,但会影响开发效率,技术要往上走,这个基石必须稳,加油记吧!

总结

以上所述是小编给大家介绍的JS中利用FileReader实现上传图片前本地预览,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
select标签设置默认选中的选项方法
Mar 02 #Javascript
原生JavaScript实现todolist功能
Mar 02 #Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 #Javascript
vue判断input输入内容全是空格的方法
Mar 02 #Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 #Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 #Javascript
Vue2.0系列之过滤器的使用
Mar 01 #Javascript
You might like
西德产收音机
2021/03/01 无线电
实用函数5
2007/11/08 PHP
php 判断数组是几维数组
2013/03/20 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
用python制作游戏外挂
2018/01/04 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
详解Python中的测试工具
2019/06/09 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
骨干教师培训制度
2014/01/13 职场文书
统计系教授推荐信
2014/02/28 职场文书
母亲节演讲稿
2014/05/27 职场文书
授权委托书格式
2014/07/31 职场文书
化工见习报告范文
2014/10/31 职场文书
2014年团队工作总结
2014/11/24 职场文书
干部年终考核评语
2015/01/04 职场文书
费城故事观后感
2015/06/10 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android