第一种方式：（使用bloburl）

格式为:

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

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

代码：

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5. </head>
  6. <body>
  7. <hr/>
  8. <br/>
  9. <input type="file"  id="myFile1"/>
  10. <img src="" id="preview_img" width="400px" height="400px" alt="">
  11.  
  12. <script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>
  13. <script>
  14.  
  15.     $("#myFile1").change(function () {
  16.         //创建blob对象，浏览器将文件放入内存中，并生成标识
  17.         var img_src = URL.createObjectURL($(this)[0].files[0]);
  18.         //给img标检的src赋值
  19.         document.getElementById("preview_img").src=img_src;
  20.         //URL.revokeObjectURL(img_src);// 手动 回收，
  21.     });
  22. </script>
  23. </body>
  24. </html>

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

格式为:

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

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

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5. </head>
  6. <body>
  7. <hr/>
  8. <br/>
  9. <input type="file"  id="myFile1"/>
  10. <img src="" id="preview_img" width="400px" height="400px" alt="">
  11.  
  12. <script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script>
  13. <script>
  14.  
  15.     $("#myFile1").change(function () {
  16.        var fileReader = new FileReader();
  17.  
  18.        fileReader.readAsDataURL($(this)[0].files[0]);
  19.        //异步加载
  20.        fileReader.onload =function (event) {
  21.            $("#preview_img").attr("src",event.target.result);
  22.        }
  23.  
  24.     });
  25.  
  26.     // $("#myFile1").change(function () {
  27.     //     //创建blob对象，浏览器将文件放入内存中，并生成标识
  28.     //     var img_src = URL.createObjectURL($(this)[0].files[0]);
  29.     //     //给img标检的src赋值
  30.     //     $("#preview_img").attr("src",img_src);
  31.     //     //URL.revokeObjectURL(img_src);// 手动 回收，
  32.     // });
  33.  
  34. </script>
  35. </body>
  36. </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. 机器学习实战笔记——KNN约会网站

    ''' 机器学习实战——KNN约会网站优化 ''' import operator import numpy as np from numpy import * from matplotlib.fon ...

  2. java 数组学习

    遍历数组 --- for和foreach int[][] A = {{2,4},{3,5}}; int i = 0; for (int[] is : A) { i++; int j = 0; for ...

  3. [转帖]AMD霄龙安全加密虚拟化曝漏洞：已修复

    AMD霄龙安全加密虚拟化曝漏洞:已修复 https://www.cnbeta.com/articles/tech/862611.htm 硬件的安全问题 今年初,Google的一位研究人员发现,AMD ...

  4. kafka整理笔记笔记

    一.为什么需要消息系统 解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多消息 ...

  5. windows下命令行利器---Cmder（安装，中文乱码，配置右键菜单）

    很多人都是在win下开发的,这样就会出现,经常需要命令行操作,而win cmd命令和linux命令有很大差异,导致大家很难受,今天给大家介绍一个win下命令行的利器-Cmder 一.先看一下它的容颜 ...

  6. C++练习 | 单向链表类模板（包含类模板中静态变量初始化格式）

    #include <iostream> #include <string> using namespace std; template <class T> clas ...

  7. 从入门到自闭之python三大器--装饰器进阶

    装饰器的进阶 有参装饰器: # def warpper(func): # def inner(*args,**kwargs): # user = input("user:") # ...

  8. Python_3day

    循环 循环是一种控制语句块重复执行的结构 while 适用于广度遍历 for 开发中经常使用   while 循环 当一个条件保持真的时候while循环重复执行语句 while 循环一定要有结束条件, ...

  9. Kong/Konga - Docker容器化安装

    1.0 安装kong + postgresDB docker network create kong-net docker pull postgres:latest docker run -d --n ...

  10. 前端页面多级联动传输数据类型问题（数组or字符串）后端处理

    在最近的工作中,遇到一个问题,个人所做的简历模块中有两个字段,分别是个人信息中的户口所在地和现居住城市. 前端界面中这两个选项框是用到了二级和三级联动,在向后端传输时希望可以通过数组类型进行传输,例如 ...