平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到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. Transaction And Lock--已提交读快照

    --===================================================== --行版本控制已提交读ALTER DATABASE DB5 SET READ_COMMI ...

  2. WPF 添加OCX控件

    1. 在计算机上安装OCX控件 2.创建WPF应用程序 3.打开工具箱 4.单击COM 组件选项卡上,选择安装的控件,,然后单击确定,将控件添加到工具箱 5.在解决方案资源管理器,右键单击UserCo ...

  3. webapi发布常见错误及解决方案

    webapi发布常见错误及解决方案 错误一: 错误:404 (Not Found) 解决方案: 在  <system.webServer>节点中添加如下模块: <modules ru ...

  4. OCP最新题库052考题解析及答案-第37题

    37.USER1 grants SELECT, INSERT, and UPDATE privileges on USER1. EMP to USER2. SYS executes this comm ...

  5. yaml 配置

    yaml文件的作用 yaml是一种直观的能够被电脑识别的的数据序列化格式,容易被人类阅读,并且容易和脚本语言交互. yaml的语法规则 字母大小写敏感: 通过缩进来表示层级关系,同层级元素需左对齐,且 ...

  6. Logstash 性能及其替代方案

    介绍 当谈及集中日志到 Elasticsearch 时,首先想到的日志传输(log shipper)就是 Logstash.开发者听说过它,但是不太清楚它具体是干什么事情的: 当深入这个话题时,我们才 ...

  7. TensorFlow支持GPU配置问题

    目录 Tensorflow-GPU 环境条件 现有硬件 现有软件 硬件要求 软件要求 步骤 0.Visual studio 1.下载安装显卡驱动 2.下载对应版本 CUDA 3.安装配置 cuDNN ...

  8. ArchLinux 下文件描述符

    stderr -> /proc/self/fd/2 标准错误:2 stdin -> /proc/self/fd/0 标准输入:0 stdout -> /proc/self/fd/1 ...

  9. 用xpath来爬图

    # xpath语法可参考http://www.w3school.com.cn/xpath/xpath_syntax.asp# 本博客引用于https://zhuanlan.zhihu.com/some ...

  10. P2300 合并神犇

    题目链接 题意分析 首先这道题不可以使用简单的贪心来做 根据\(DP\) 我们令\(dp[i]\)表示当前到了\(i\)一共做了\(dp[i]\)次合并 \(pre[i]\)表示当前合并到了\(i\) ...