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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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 广告调用类代码(支持Flash调用)
2011/08/11 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
Python 流程控制实例代码
2009/09/25 Python
简单使用Python自动生成文章
2014/12/25 Python
python监控进程脚本
2018/04/12 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
详解python中init方法和随机数方法
2019/03/13 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
如何清空python的变量
2020/07/05 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
软件测试面试题
2015/10/21 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
公司开会通知
2015/04/20 职场文书
高中历史教学反思
2016/02/19 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers