平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到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. ParserError: Error tokenizing data. C error: Expected 2 fields in line 15, saw 4

    pandas 读取泰坦尼克号数据,报错 %matplotlib inline import numpy as np import pandas as pd import re as re train ...

  2. UIViewContentMode-

    图片很小,frame很大 图片很大,frame很小 UIViewContentModeScaleToFill, UIViewContentModeScaleAspectFit, UIViewConte ...

  3. [转]IOS UIView 之属性篇

    [转载自:IOS UIView 之属性篇 From CSDN] UIView 继承于UIResponder             所遵守的协议有 NSCoding .UIAppearance. UI ...

  4. 条目二十六《iterator优先于const_iterator、reverse_iterator以及const_reverse_iterator》

    条目二十六<iterator优先于const_iterator.reverse_iterator以及const_reverse_iterator> 这几个东西不是类型来的,而是不同的类,所 ...

  5. 使用私有git仓库备份服务器脚本和配置文件

    1. 创建私有git仓库 服务器端配置: # 安装 git yum -y install git # 创建 git 用户 useradd git # 创建私有仓库数据存储目录 mkdir /git_b ...

  6. virsh 连接虚拟机 (vnc 或 控制台)

    第一种方式 1.如果虚拟机登录方式为VNC,在ubuntu机器上安装vncviewer 在虚拟机的配置xml中 <graphics type="vnc" autoport=& ...

  7. linux ssh 上传 文件

    在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件scp username@servername:/path/filename /var/www/local_dir(本地 ...

  8. Flask基础应用

    一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 Django: 优点: 大而全,组件非常全面. 缺点: 太大,加载太大,浪费资源. Flask: 优点: ...

  9. js对函数参数的封装

    对函数参数的封装 一个原始函数有n个参数,用wrap对函数进行封装,生成一个新的函数,当给它传入参数数量为n的时候,将执行原始函数,否则不执行 //函数封装 function wrap(func){ ...

  10. 经典C面试真题精讲

    第一章 灵魂--指针 101. p++ 请分析下述代码的输出结果 int main() { char* p1 = "China"; char* p2, * p3; p2 = (); ...