在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. 将一个字典内的内value转换为集合：返回一个数组，此数组中包含输入字典的键值对中的数组的所有元素（为NSArray添加category）

    - (NSArray *)testa:(NSDictionary *)dic { NSMutableArray *arr_M = [NSMutableArray array]; // 1.遍历每一个元 ...

  2. POJ 3421 X-factor Chains

    线型素数筛+质因素分解+组合数. AC后发现这样做效率有点低..766ms. #include<stdio.h> #include<string.h> #include< ...

  3. Mac下node.js卸载方法收集

    brew的安装方式 直接通过一条命令 brew uninstall nodejs 官网下载pkg安装包的 通过这条命令 sudo rm -rf /usr/local/{bin/{node,npm},l ...

  4. LPC1788的spi使用

    #ifndef __SPI_H_ #define __SPI_H_ #include "common.h" #include "delay.h" // cs p ...

  5. UVA - 129 Krypton Factor （困难的串）（回溯法）

    题意:求由字母表前L个字母组成的字典序第n小的困难串.(如果一个字符串包含两个相邻的重复子串,则称它是"容易的串",其他串称为"困难的串".) 分析:回溯时,检 ...

  6. 菊花加载第三方--MBprogressHUD 分类： ios技术 2015-02-05 19:21 120人阅读 评论(0) 收藏

    上次说到了网络请求AFN,那么我们在网络请求的时候,等待期间,为了让用户不认为是卡死或程序出错,一般都会放一个菊花加载,系统有一个菊花加载类叫UIProgressHUD.但是我今天要说的是一个替代它的 ...

  7. [转载] python利用psutil遍历进程名字和exe所在目录

    本文转载自: http://www.duanzhihe.com/1594.html http://www.jianshu.com/p/64e265f663f6 import psutil,os,tim ...

  8. C语言－表达式

    表达式是使用运算符连接起来的式子,C语言中的表达式有以下几种: 1.算数运算符 + - * / % 2.赋值运算符 +=  -=  *=  /=  %= 3.自增.自减 ++   --   a++为先 ...

  9. ＳVN　备忘录

    上传文件夹 svn import distcomp/ svn+ssh://USERNAME@166.120.110.119/mnt/disk1/fserver/svn/distcomp -m &quo ...

  10. linux 脚本保留日志

    使用tee使屏幕和文件都输出日志. 2 >&1中 2是错误输出,1是标准输出, 2>&1是标准和错误一起输出. repo sync 2>&1 | tee -a ...