利用FileReader实现上传图片前本地预览
引子
平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到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就没记全,前端确实还是有很多东西就是要牢牢记住的,没什么捷径可走,这些东西就是基础,没记住就是基础差。虽然你并不影响你做出东西来,但会影响开发效率,技术要往上走,这个基石必须稳,加油记吧!
关于图片上传本地预览的就写到这里了,如果有什么我理解的不对的地方欢迎大家在评论中指出!
利用FileReader实现上传图片前本地预览的更多相关文章
- FileReader实现上传图片前本地预览
平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上.或者使用前端插件.这篇博客使用的是HTML5的新特性——FileReader.由于兼容性,这种方法不适 ...
- HTML5文件上传前本地预览
HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...
- jquery实现图片上传前本地预览
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- jquery实现图片上传前本地预览功能
HTML <img id="pic" src="" > <input id="upload" name="fil ...
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- IE8/9 本地预览上传图片
本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...
- FileReader本地预览图片
<body> <p><label>请选择一个图像文件:</label><input type="file" id=" ...
- jQuery图片上传前先在本地预览(不经过后端处理)
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
随机推荐
- AF_INET 和PF_INET区别;AF_LOCAL PF_LOCAL 区别.
从字面理解: AF_INET = Address Format, Internet = IP Addresses PF_INET = Packet Format, Internet = IP, TCP ...
- Maven1-HelloWorld简单入门
编写POM(Project Object Model) Maven项目的核心是pom.xml,它定义了项目的基本信息,用于描述项目如何构建,声明项目依赖 创建文件夹,名称为hello-world 创建 ...
- 让我们一起爱(装)上Homestead吧
本文是Laravel实战:任务管理系统(一)的扩展阅读原文链接 先来点残酷现实: 真正用过homestead的,一般不会问homestead到底好在哪里 如果你还没有爱上homestead,只能说明 ...
- 尝试Spring Data Jpa--告别CRUD
前言 说到我们的web开发架构分层中,持久层是相对底层也是相对稳定的一层,奠定好根基后,我们才能专注于业务逻辑和视图开发.而自从ORM思想蔓延开来后,全自动ORM的Hibernate和半自动ORM的M ...
- weex 启动 ios 模拟器
前提需要的安装 node npm weex-toolkit cocoaPods 1. 创建weex工程 weex create helloWolrd 2. 进入helloWolrd文件夹安装依赖,我用 ...
- C#高性能大容量SOCKET并发(八):通讯协议
协议种类 开发Socket程序有两种协议类型,一种是用文本描述的,类似HTTP协议,定义字符集,好处是兼容性和调试方便,缺点是解析文本会损耗一些性能:一种是用Code加结构体,定义字节顺序,好处是性能 ...
- Struts2中拦截器的使用与配置
一,拦截器是什么? 拦截器是在Action执行之前和之后执行的代码,是一个类似于过滤器的类: 二,拦截器的作用 拦截器拦截Action的请求,在Action之前或之后实现某项功能: 三,拦截器的特点 ...
- _beginthread和CreatThread的区别
转自:http://www.jb51.net/article/41459.htm 我们知道在Windows下创建一个线程的方法有两种,一种就是调用Windows API CreateThread()来 ...
- 隐藏C语言黑窗口
隐藏C语言程序运行的黑窗口,加入预编译命令: (预编译,Linker链接,windows模式,黑窗口是dos模式) #pragma comment(linker,"/subsystem:\& ...
- Opensshd 源码升级
OPenssh 下载地址: http://www.openssh.com/ 以下步骤 OS: 6.x 安装Opensshd 7.4p1 验证通过 6.8 安装Opensshd 7.6p1 验证通过 ...