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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
页面中js执行顺序
Nov 09 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 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
PHP读取XML值的代码(推荐)
2011/01/01 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
python使用多线程不断刷新网页的方法
2015/03/31 Python
numpy中的高维数组转置实例
2018/04/17 Python
对于Python深浅拷贝的理解
2019/07/29 Python
pywinauto自动化操作记事本
2019/08/26 Python
Django 批量插入数据的实现方法
2020/01/12 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
python实例化对象的具体方法
2020/06/17 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
应届大学生求职信
2013/12/01 职场文书
检察官就职演讲稿
2014/01/13 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
CAD实训总结范文
2015/08/03 职场文书