第一种方式：（使用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. Htmlunit 设置缓存文件

    起因:最近用Htmlunit爬取网页.demo运行起来后,发现速度相当慢,一直在不停的加载js文件,偶尔还会报错,js超时等.抓包工具看了一下请求,发现一直在不停的下载js文件.按理说请求过js文件后 ...

  2. 【POJ - 3009】Curling 2.0 （dfs+回溯）

    -->Curling 2.0 直接上中文 Descriptions: 今年的奥运会之后,在行星mm-21上冰壶越来越受欢迎.但是规则和我们的有点不同.这个游戏是在一个冰游戏板上玩的,上面有一个正 ...

  3. flask类装饰器

    from flask import Flask,request,views from functools import wraps app = Flask(__name__) #自定义登录装饰器 de ...

  4. 企业微信 PC端多开

    企业微信,正常情况下一个PC端只能登一个账号.现在多个人共用一个外网机,需要在一个电脑上登录多个账号.解决办法如下: 下载process explorer.exe,使用管理员权限运行,找到WXWork ...

  5. [Python3] 039 语法调试

    目录 语法调试 1. 调试技术 2. pdb 调试 插一个 gdb 3.Pycharm 调试 4. 单元测试 语法调试 1. 调试技术 调试流程 单元测试 → 集成测试 → 交测试部 分类: 静态调试 ...

  6. SpreadJS与Vue集成，苏宁集团『极客办公』系统开发案例

    “造极”如今已成为苏宁集团的年度核心关键词.“造极”在具体工作上的体现,代表着苏宁不断追求极致的工匠精神,即对待每一个环节,都要严格要求.精益求精.“极客办公”系统,正是在这种环境下应运而生.本期公开 ...

  7. CF 148D Bag of mice 题解

    题面 这是我做的第一道概率DP题: 做完后发现没有后效性的DP是真的水: 在这里说主要是再捋顺一下思路: 设f[i][j]表示有i只白鼠,j只黑鼠是获胜的概率: 显然:f[i][0]=1; 然后分四种 ...

  8. Zabbix 配置Python邮件告警

    1.首先你应该注册一个163邮箱,用于发信,再注册时开启SMTP/POP3功能,使用加密密码认证. 2.在Zabbix主机上新建send.py文件,将以下代码复制编辑,设置发件用户.密码. [root ...

  9. Codeforces 1221F. Choose a Square

    传送门 对于某个点 $(x,y)$ ,不妨设 $x<y$ 因为如果 $x>y$ 直接按 $y=x$ 对称一下即可 当且仅当正方形左下角 $(a,a)$ 满足 $a<=x$,右上角 $ ...

  10. django 中实现文件下载的3种方式

    方法一:使用HttpResponse from django.shortcuts import HttpResponse def file_down(request): file=open('/hom ...