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代码
Jun 27 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
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中feof()函数实例测试
2014/08/23 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
Python 字典(Dictionary)操作详解
2014/03/11 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python 2.7.14安装图文教程
2018/04/08 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Python 随机按键模拟2小时
2020/12/30 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
大专会计自我鉴定
2014/02/06 职场文书
户外拓展活动方案
2014/02/11 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
追讨欠款律师函
2015/06/24 职场文书
如何撰写创业策划书
2019/06/27 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫