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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
详解CocosCreator消息分发机制
Apr 16 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实现阳历到农历转换的类实例
2015/03/07 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
php日期操作技巧小结
2016/06/25 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
高三英语教学反思
2014/01/13 职场文书
李开复演讲稿
2014/05/24 职场文书
司机岗位职责
2015/02/04 职场文书
刑事起诉书范文
2015/05/19 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
工作自我评价范文
2019/03/21 职场文书
python单元测试之pytest的使用
2021/06/07 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python