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 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
javascript的console.log()用法小结
May 31 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
JS实现数组深拷贝的方法分析
Mar 06 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文件操作代码(一)
2009/03/20 PHP
JS模拟多线程
2007/02/07 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Django 返回json数据的实现示例
2020/03/05 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Python3读写ini配置文件的示例
2020/11/06 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
工程力学专业自荐信范文
2014/03/17 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
人工作失职检讨书
2015/05/05 职场文书
月考总结与反思
2015/10/22 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL