第一种方式：（使用bloburl）

格式为:

　　blob:http://localhost:8080/9d1c3f82-90ff-4891-a1a3-9cb9a9782899

　　blob:http://localhost:端口号/浏览器随机生成的字符

代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

</head>

<body>

<hr/>

<br/>

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

<img src="" id="preview_img" width="400px" height="400px" alt="">

<script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>

<script>

    $("#myFile1").change(function () {

        //创建blob对象，浏览器将文件放入内存中，并生成标识

        var img_src = URL.createObjectURL($(this)[0].files[0]);

        //给img标检的src赋值

        document.getElementById("preview_img").src=img_src;

        //URL.revokeObjectURL(img_src);// 手动 回收，

    });

</script>

</body>

</html>

第二种方式：（使用dataurl）比较消耗性能

格式为:

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

data:文件类型;编码类型,进行转译的字符

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

</head>

<body>

<hr/>

<br/>

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

<img src="" id="preview_img" width="400px" height="400px" alt="">

<script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>

<script>

    $("#myFile1").change(function () {

       var fileReader = new FileReader();

       fileReader.readAsDataURL($(this)[0].files[0]);

       //异步加载

       fileReader.onload =function (event) {

           $("#preview_img").attr("src",event.target.result);

       }

    });

    // $("#myFile1").change(function () {

    //     //创建blob对象，浏览器将文件放入内存中，并生成标识

    //     var img_src = URL.createObjectURL($(this)[0].files[0]);

    //     //给img标检的src赋值

    //     $("#preview_img").attr("src",img_src);

    //     //URL.revokeObjectURL(img_src);// 手动 回收，

    // });

</script>

</body>

</html>

js 实现图片预览的两种方式的更多相关文章

  1. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  2. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  3. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 转载：Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式

    Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关 ...

  5. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  6. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  7. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  9. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

随机推荐

  1. 【HANA系列】SAP HANA查看某一用户最后登录时间及无效连接次数

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA查看某一用户最后 ...

  2. Git_mergetool_tutorial（转载）

    原文链接:https://gist.github.com/karenyyng/f19ff75c60f18b4b8149#table-of-content Table Of Content Skip t ...

  3. KETTLE 主键不唯一解决方法

    SELECT 某一列, COUNT( 某一列 ) FROM 表 GROUP BY 某一列 HAVING

  4. 一篇文章搞懂python2、3编码

    说在前边: 编码问题一直困扰着每一个程序员的编程之路,如果不将它彻底搞清楚,那么你的的这条路一定会走的格外艰辛,尤其是针对使用python的程序员来说,这一问题更加显著, 因为python有两个版本, ...

  5. PostgreSQL查看等待锁的SQL和进程

    查看等待锁的查询和进程: The following query may be helpful to see what processes are blocking SQL statements (t ...

  6. 利用commons-pool2自定义对象池

    一.为什么使用对象池   恰当地使用对象池化技术,可以有效地减少对象生成和初始化时的消耗,提高系统的运行效率.commons-pool2是Apache下一个开源的公共资源池.我们可以根据它来快速的建立 ...

  7. Struts 2访问Servlet API

    在servlet中可以通过servlet API来获取Session,在Struts中如何获取Session呢? 解析:将用户名放入session 两种方案 1. 与Servlet API解耦的访问方 ...

  8. 【经典问题】maximum subset sum of vectors

    AtCoder Beginner Contest 139 Task F Engines 题目大意 给定 $n$ 个二维向量,从中选出若干个,使得它们的和的模最大. 分析 这是一个经典问题,还有一种提法 ...

  9. spark教程(10)-sparkSQL

    sparkSQL 的由来 我们知道最初的计算框架叫 mapreduce,他的缺点是计算速度慢,还有一个就是代码比较麻烦,所以有了 hive: hive 是把类 sql 的语句转换成 mapreduce ...

  10. Java后端技术面试汇总(第二套)

    1.Java相关 • Arraylist与LinkedList默认空间是多少:• Arraylist与LinkedList区别与各自的优势List 和 Map 区别:• 谈谈HashMap,哈希表解决 ...