平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到URL再渲染到页面上。或者使用前端插件。这篇博客使用的是HTML5的新特性——FileReader。由于兼容性，这种方法不适合pc端...FileReader具体的兼容性点这里：FileReader兼容性。

　　自从有了HTML5的FileReader对象以后，预览图片变得简单多了，不再需要后台的配合，并且JS操作本地文件已经成为了可能。这种方法的思路是：通过readAsDataURL(file)方法把图片文件转成base64编码，然后把base64编码替换到预览图片的src属性即可。这篇博文主要讲解使用方法，如果想要了解更多关于FileReader对象的，可以看一下这里：FileReader详解。下面分别讲解上传单张和多张的案例：

 1、单张上传

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>上传单张预览</title>

</head>

<body>

<div id="wrapper">

  <input id="fileUpload" type="file" />

  <div id="image-holder"> </div>

</div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  <script>

  $("#fileUpload").on('change', function () {

    if (typeof (FileReader) != "undefined") {

        var image_holder = $("#image-holder");

        image_holder.empty();

        var reader = new FileReader();

        reader.onload = function (e) {

            $("<img />", {

                "src": e.target.result,

                "class": "thumb-image"

            }).appendTo(image_holder);

        }

        reader.readAsDataURL($(this)[0].files[0]);  // url转base64

    } else {

        alert("你的浏览器不支持FileReader.");

    }

  });

  </script>

</body>

</html>

2、多张上传

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>上传多张预览</title>

</head>

<body>

<div id="wrapper">

  <input id="fileUpload" type="file" multiple /><br />

  <div id="image-holder"> </div>

</div>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  <script>

  $("#fileUpload").on('change', function () {

   //获取上传文件的数量

   var countFiles = $(this)[0].files.length;

   var imgPath = $(this)[0].value;

   var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();

   var image_holder = $("#image-holder");

   image_holder.empty();

   if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {

       if (typeof (FileReader) != "undefined") {

           // 循环所有要上传的图片

           for (var i = 0; i < countFiles; i++) {

               var reader = new FileReader();

               reader.onload = function (e) {

                   $("<img />", {

                       "src": e.target.result,

                           "class": "thumb-image"

                   }).appendTo(image_holder);

               }

               reader.readAsDataURL($(this)[0].files[i]); //图片转base64

           }

       } else {

           alert("你的浏览器不支持FileReader！");

       }

   } else {

       alert("请选择图像文件。");

   }

  });

  </script>

</body>

</html>

参考链接：

http://www.cnblogs.com/tandaxia/p/5125275.html

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html

FileReader实现上传图片前本地预览的更多相关文章

  1. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  2. HTML5文件上传前本地预览

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...

  3. jquery实现图片上传前本地预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  4. jquery实现图片上传前本地预览功能

    HTML <img id="pic" src="" > <input id="upload" name="fil ...

  5. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  6. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  7. IE8/9 本地预览上传图片

    本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...

  8. FileReader本地预览图片

    <body> <p><label>请选择一个图像文件:</label><input type="file" id=" ...

  9. jQuery图片上传前先在本地预览（不经过后端处理）

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...

随机推荐

  1. C#Zxing.net生成条形码和二维码

    下载Zxing.net官网:https://archive.codeplex.com/?p=zxingnet 或者去VS程序包下载 封装好的代码: using System; using System ...

  2. ASP .Net Core 2.0 修改默认端口

    ASP .Net Core 的默认端口是5000,如果想在同一台服务器上运行多个实例,就不能都监听5000端口了,需要每一个实例都监听不同的端口.当然,如果您正在使用IIS或者Jexus来托管,可以不 ...

  3. Centos 固定ip

    vim /etc/sysconfig/network-scripts/ifcfg-eth0 BOOTPROTO="static" ONBOOT=yes IPADDR=192.168 ...

  4. ES6——数据结构 Map

    数据结构 Map 字典: 用来存储不重复key的 Hash结构.不同于集合(Set)的是,字典使用的是 [键,值] 的形式来存储数据的. JavaScript 的对应那个(Object:{}) 只能用 ...

  5. [Cocos2d-x for WP8学习笔记] 一些基本概念,建立自己的启动界面

    流程控制:场景是相对不变的游戏元素集合,游戏在场景间的切换就是流程控制. 场景.层和精灵:它们是不同层次的游戏元素.通常,场景包含层,层包含精灵,场景与层是其他游戏元素的容器,而精灵是展示给玩家的图形 ...

  6. BAT 命令 .bat

      echo.@.call.pause.rem(小技巧:用::代替rem)是批处理文件最常用的几个命令 echo 表示显示此命令后的字符 echo off 表示在此语句后所有运行的命令都不显示命令行本 ...

  7. MongoDB集群方案介绍

    MongoDB集群方案介绍 一.什么是mongodb集群? 是指由多台mongodb服务器组成的服务器集群,称之为mongodb集群. 二.mongodb集群搭建的方式: 1.Replica Set  ...

  8. P5108 仰望半月的夜空

    题目链接 题意分析 给你一个字符串 让你求\(1-n\)长度下的字符串的中字典序最小并且最靠左的字符串的开头位置 我们考虑先建出\(SA\) 然后考虑对于一个字符串后缀排序之后 baba 后缀排序之后 ...

  9. 如何高度自定义CollectionView的header和foot

    最近在研究CollectionView,突然发现觉得他的HeaderSection和FootSection也可以高度自定义. 国外有详细的教程:http://www.appcoda.com/ios-c ...

  10. java中的Lamdba表达式和Stream

    基于JDK 1.8 1.循环: // 以前的循环方式 for (String player : players) { System.out.print(player + "; ") ...