第一种方式：（使用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. 【Linux开发】linux设备驱动归纳总结（四）：2.进程调度的相关概念

    linux设备驱动归纳总结(四):2.进程调度的相关概念 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  2. C++中map和unordered_map的用法

    1. 简介 map和unordered_map都是c++中可以充当字典(key-value)来用的数据类型,但是其基本实现是不一样的. 2. map 对于map的底层原理,是通过红黑树(一种非严格意义 ...

  3. aws技术链接

    S3: https://docs.aws.amazon.com/s3/?id=docs_gateway emrfs: https://docs.aws.amazon.com/emr/latest/Ma ...

  4. PTA(Basic Level)1024.科学计数法

    科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...

  5. springboot 用redis缓存整合spring cache注解，使用Json序列化和反序列化。

    springboot下用cache注解整合redis并使用json序列化反序列化. cache注解整合redis 最近发现spring的注解用起来真的是很方便.随即产生了能不能吧spring注解使用r ...

  6. .Net Core使用AutoMapper做对象关系映射

    我想很多后端开发者,纠结于如何在Dto及表实体中做属性关系映射,因为真的太繁琐了., ⒈如何使用? Mapper.Initialize(cfg => cfg.CreateMap<Users ...

  7. python3.7 安装Scrapy 失败问题

    python的Scrapy框架,需要Twisted依赖以及VC++ 14 以上的环境,这些就不再赘述.讲讲今天安装Twisted和Scrapy遇到的其他问题. 首先就是直接安装Twisted成功后,安 ...

  8. cut,sort,awk,sed,tr,find,wc,uniq在Linux中的用法

    cut语法cut [-bn] [file]cut [-c] [file]cut [-df] [file] -b :以字节为单位进行分割.这些字节位置将忽略多字节字符边界,除非也指定了 -n 标志.-c ...

  9. docopt 安装及基本应用

    什么是 docopt docopt是一种python 编写的命令行执行脚本的交互语言. 它是一种语言! 它是一种语言! 它是一种语言! 使用这种语言可以在自己的脚本中,添加一些规则限制,这样脚本在执行 ...

  10. oa_mvc_easyui_详细页(5)

    1.表格详细列中添加a标签,给id参数 <a href="javascript:void(0)" class="details" ids="@n ...