平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到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. leetcode 两个数组的交集 II

    给定两个数组,写一个方法来计算它们的交集. 例如: 给定 nums1 = [1, 2, 2, 1], nums2 = [2, 2], 返回 [2, 2]. /** * @param {number[] ...

  2. 从golang的垃圾回收说起（下篇）

    文章来自网易云社区 4 Golang垃圾回收的相关参数 4.1 触发GC gc触发的时机:2分钟或者内存占用达到一个阈值(当前堆内存占用是上次gc后对内存占用的两倍,当GOGC=100时)  # 表示 ...

  3. 在线绘图网站 UML、思维导图、 流程图、 用例图等等

    https://www.processon.com/ 用我的微信登录即可 帐号是 QQ邮箱

  4. GPU大百科全书 第二章 凝固生命的光栅化

    光栅化——死神来了……   前言:在上一期的GPU大百科全书里,我们目睹了可爱的香草从抽象世界走向现实,从方程还原成实体的全过程.可以说香草活了,因为几何单元,我们赋予了她完整的灵魂. 如果你正在为G ...

  5. 原生态js展开收缩

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

  6. Sublime Text3 最新版3207 安装及破解

    注:原文地址 https://www.abbeyok.com/archives/337 Sublime Text 3最近更新了新版本,最新版本:3207,之前的license无效了,新版破解方法如下: ...

  7. Hello QT（译）

    简评:PySide2 是 QT 官方出品,值得期待 PySide2 第一个技术预览版快要发布了,在此给出一个简单的例子,来展示它将如何打开 Python世界的大门. 下面我们将使用 QWidgets ...

  8. ThinkPHP 3.2.x 集成极光推送指北

    3.2版本已经过了维护生命周期,官方已经不再维护,请及时更新至5.0版本 -- ThinkPHP 官方仓库 以上,如果有条件,请关闭这个页面,然后升级至 ThinkPHP 5,如果由于各种各样的原因无 ...

  9. Intellig IDEA 搭建spring boot 热部署

    在pom中直接引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  10. 阿里VS华为-开源镜像站体验及评测

    最近对阿里和华为的开源镜像站做了深度体验,并将评测结果分享给大家: 一.评测产品: 华为开源镜像站(https://mirrors.huaweicloud.com/)以下简称 华为 阿里开源镜像站(h ...