在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. Asp.net Ajax提供PageMethods调用

    页面上的Javascript通过ASP.NET AJAX除了可以调用Web服务类,还可以调用网页中的静态方法. <%@ Page Language="C#" %> &l ...

  2. mac系统不能使用127.0.0.2的解决方案

    英语学得不好,国外这位大神的精彩解释不是特能看的懂.我模仿的试了一下. 解决方案: 1.打开mac终端 2.输入:sudo ifconfig lo0 alias 127.1.1.1 netmask 0 ...

  3. Quartz.NET总结（一）

    Quartz.NET总结(一) 前段时间,花了大量的时间,将原先的计划任务,切换到Quartz.NET来进行管理.原先的后台定时服务都是通过计划任务来实现的,但是随着业务增长,计划任务也越来越多,每个 ...

  4. LPC2478的GPIO使用详解

    GPIO使用 LPC2478的GPIO是不能断开时钟的,上电就连接.处理GPIO主要就下面几步 1.      设置为普通IO模式 2.      设置输入输出方向 3.      设置值 以下寄存器 ...

  5. WebView点击图片看大图效果

    在webViewDelegate里面添加如下代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 - (voi ...

  6. 命名空间“Microsoft.AspNet”中不存在类型或命名空间名“Mvc”

    问题: 错误 CS0234 命名空间"Microsoft.AspNet"中不存在类型或命名空间名"Mvc"(是否缺少程序集引用?) 解决方案: 打开文件夹 Us ...

  7. 动态添加试题选项按钮 radioButton(一)

    最近在做WebView加载试题的功能,但是选项按钮如果放的WebView中,点击时反应很慢.于是把选项用原生的RadioButton,而试题题目和答案放在WebView中.但是选项的个数不确定,所以需 ...

  8. 升级R版本后，更新Package

    升级R版本后,若重新安装所有的package将非常麻烦,可以尝试运行一下程序: 1)在旧版本中的R中运行 #--run in the old version of R setwd("C:/T ...

  9. dev中TreeList的应用(转)

    如果需要在单元格添加时则用TreeList如果只是单纯读取数据或检索数据时则用GridControl 1.如果点击添加 时则添加TreeList的节点: protected internal void ...

  10. Java语言Socket接口用法详解

    Socket接口用法详解   在Java中,基于TCP协议实现网络通信的类有两个,在客户端的Socket类和在服务器端的ServerSocket类,ServerSocket类的功能是建立一个Serve ...