平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到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. 【原创】vim插件安装简介

    一.安装vundle(vim插件管理软件): git clone https://github.com/VundleVim/Vundle.vim 拷贝目录到 ~/.vim/bundle/Vundle. ...

  2. NOI2007 社交网络

    题目链接:戳我 就是在floyd计算dis的时候,顺便把两点之间最短路的个数也计算了qwqwq \(sum[i][j]=\sum sum[i][k]*sum[k][j]\) 代码如下: #includ ...

  3. cisco和h3c网络设备中一次性打印全部配置信息

    cisco的是全页打印配置信息的命令: #terminal length 0 #show run 华为和h3c的是: >screen-length 0 temporary >display ...

  4. python3 的zip（）函数

    重点 https://blog.csdn.net/qq826364410/article/details/78259796 为啥会出现几个两个空列表????

  5. “全栈2019”Java第七章：IntelliJ IDEA注释快捷键

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. 模糊查询中Like的使用

    通配符: %. _ %:表示任意个或多个字符.可匹配任意类型和长度的字符 _:表示任意单个字符.匹配单个任意字符,它常用来限制表达式的字符长度语句:(可以代表一个中文字符) demo: //usern ...

  7. luoguP3702 [SDOI2017]序列计数

    https://www.luogu.org/problemnew/show/P3702 题目让我们在 $ [1, m] $ 从中选出 $ n $ 个数,当中要有 > $ 0 $ 个质数,和是 $ ...

  8. 【BZOJ1055】[HAOI2008]玩具取名（区间DP）

    [HAOI2008]玩具取名 题目描述 某人有一套玩具,并想法给玩具命名.首先他选择\(WING\)四个字母中的任意一个字母作为玩具的基本名字.然后他会根据自己的喜好,将名字中任意一个字母用" ...

  9. HTML-基础及一般标签

    HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...

  10. C#使用Redis的基本操作

    一,引入dll 1.ServiceStack.Common.dll 2.ServiceStack.Interfaces.dll 3.ServiceStack.Redis.dll 4.ServiceSt ...