在FileReader出现之前，前端的图片预览是这样实现的：把本地图片上传到服务器，服务器把图片地址返回，并把它替换到图片元素的src属性。
　　这种方法的缺点是：必须要先把图片上传到服务器。那么问题来了，如果上传的图片很大，而网速又很慢，这就需要等待很久预览图片才会显示出来了，而且，如果用户预览图片后发现不太满意，想重新选择一张图片，这时候还要把已经上传到服务器上的图片给删除掉。
　　自从有了HTML5的FileReader对象以后，预览图片变得简单多了，不再需要后台的配合，并且JS操作本地文件已经成为了可能。这种方法的思路是：通过FileReader.prototype.readAsDataURL()方法把图片文件转成base64编码，然后把base64编码替换到预览图片的src属性即可。如果想要了解更多关于FileReader对象的，可以看一下这里：FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
　　下面是使用FileReader进行图片预览的简单demo：
 <!doctype html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

 </head>

 <body>

 <input type="file"><br>

 <img src="" height="200" alt="Image preview area..." title="preview-img">

 <script>

   var fileInput = document.querySelector('input[type=file]'),

           previewImg = document.querySelector('img');

   fileInput.addEventListener('change', function () {

       var file = this.files[0];

       var reader = new FileReader();

       // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片

       reader.addEventListener("load", function () {

           previewImg.src = reader.result;

       }, false);

       // 调用reader.readAsDataURL()方法，把图片转成base64

       reader.readAsDataURL(file);

   }, false);

 </script>

 </body>

 </html>

　　关于图片预览的就写到这里啦，如果哪些地方写得不对或者问题的，亲们可以在评论提出~

　　今天是大年初九，也是上班的第一天，新的一年，新的开始，新的期待。祝愿亲们2017身体健康、代码无bug！

使用FileReader实现前端图片预览的更多相关文章

  1. 前端图片预览，上传前预览，兼容IE7、8、9、10、11，Firefox，Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  2. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  3. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  4. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  5. HTML5时代的纯前端上传图片预览及严格图片格式验证函数（转载）

    原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代 ...

  6. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  7. ext图片预览功能实现，前端代码

    效果图: extjs代码: // 模型 Ext.define('ParkingAttachment', {extend: "Ext.data.Model", idProperty: ...

  8. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  9. webform的原生操作图片预览和上传

    1.使用input标签进行图片操作,input的标签有一个accept属性,accept 属性只能与 <input type="file"> 配合使用.它规定能够通过文 ...

随机推荐

  1. [iOS]C语言技术视频-03-程序分支结构(switch)

    下载地址: 链接: http://pan.baidu.com/s/1iBpYA 密码: e2ym

  2. centos7中yum安装ntfs-3g

    CentOS默认源里没有ntfs3g,想要添加ntfs支持,无非是自己下载编译安装或者加源yum安装. 新安装了一个CentOS7,用的是添加aliyun的epel源来yum安装的方式,简单易行. 1 ...

  3. python redis list操作

    LPUSH list_name value [value ...] Prepend one or multiple values to a list 从左侧插入值,最早插入的值在最右边 LPUSHX ...

  4. pip install -r requirements.txt 安装mysqldb失败 解决方案

    在pip.log中出现sh: 1: mysql_config: not found等一坨报错,因为没有安装另一个包: 只要原因是没有安装:libmysqlclient-dev sudo apt-get ...

  5. MySQL的 explain 解析

    EXPLAIN 的每个输出行提供一个表的相关信息,并且每个行包括下面的列: 项 说明 id MySQL Query Optimizer 选定的执行计划中查询的序列号.表示查询中执行 select 子句 ...

  6. 《数据结构与算法分析：C语言描述》读书笔记------练习1.1 求第K大的数

    求一组N个数中的第k个最大者,设k=N/2. import java.util.Random; public class K_Max { /** * @param args */ //求第K大的数,保 ...

  7. VC2010编写Dll文件（转）

    源:VC2010编写Dll文件 1. 打开VS2010[Flie / New / Project / Visual C++ / Win32 / Win32 Console Application]在下 ...

  8. PHP大小写问题

    PHP对于系统函数.用户自定义函数.类名称等是不区分大小写的如可以用EHCO也可以用echo调用显示函数, 但对于变量名称又是区分大小写的,如$Name和$NAME是2个不同的变量. 而对于文件名又因 ...

  9. Android与JNI(三) ---- c++调用java(转载)

    源码下载:JniDemo JNI就是Java Native Interface, 即可以实现Java调用本地库, 也可以实现C/C++调用Java代码, 从而实现了两种语言的互通, 可以让我们更加灵活 ...

  10. PCA主成分分析方法

    PCA: Principal Components Analysis,主成分分析. 1.引入 在对任何训练集进行分类和回归处理之前,我们首先都需要提取原始数据的特征,然后将提取出的特征数据输入到相应的 ...