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 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
JavaScript数组方法总结分析
May 06 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
javascript运行机制之执行顺序理解
Aug 03 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
js同源策略详解
2015/05/21 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
python 网络爬虫初级实现代码
2016/02/27 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python多进程控制学习小结
2018/10/31 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
python集合能干吗
2020/07/19 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
家长评语和期望
2014/02/10 职场文书
骨干教师考核评语
2014/12/31 职场文书
行政助理岗位职责
2015/02/10 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书