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 相关文章推荐
JQuery之拖拽插件实现代码
Apr 14 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
OpenLayers3实现测量功能
Sep 25 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导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
php生成动态验证码gif图片
2015/10/19 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
React组件refs的使用详解
2018/02/09 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
PyQt5实现拖放功能
2018/04/25 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
《钱学森》听课反思
2014/03/01 职场文书
教师党员承诺书
2014/03/25 职场文书
拉拉队口号
2014/06/16 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2014年班级工作总结
2014/11/14 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android