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的event详解。
Sep 06 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 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
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
实例解析php的数据类型
2018/10/24 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python实现最长公共子序列
2018/05/22 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python算法题 链表反转详解
2019/07/02 Python
Python用字典构建多级菜单功能
2019/07/11 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python每天定时运行某程序代码
2019/08/16 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
会计学专业学生的求职信范文
2014/01/27 职场文书
公司节能减排方案
2014/05/16 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书