第一种方式：（使用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. 把CSV文件中的labels标签提取为json文件

    需求: validationImages.csv文件是存储验证集数据名称和类别信息(labels)的文件, 要生成一个label和类别名一一对应且正序排列的json文件,代码如下: labels_di ...

  2. 分享个昨天学的，sqlserver查表的所有列的列名，类型，长度的sql

     select a.name as 列名, a.length as 长度,b.name as 类型 from syscolumns a left join systypes b on a.xtype  ...

  3. Redundant Connection

    In this problem, a tree is an undirected graph that is connected and has no cycles. The given input ...

  4. 洛谷 P2633 Count on a tree 题解

    题面 对于每个点建立一颗主席树: 然后按照树上差分的思想统计主席树的前缀和: lca+主席树+前向星存表就可以了: #include <bits/stdc++.h> #define inc ...

  5. python基础_面向对象进阶

    @property装饰器 之前我们讨论过Python中属性和方法访问权限的问题,虽然我们不建议将属性设置为私有的,但是如果直接将属性暴露给外界也是有问题的,比如我们没有办法检查赋给属性的值是否有效.我 ...

  6. python-socketserver实例

    import socketserver class MyTCPHandler(socketserver.BaseRequestHandler): def handle(self): while Tru ...

  7. leetcode 1267. Count Servers that Communicate

    You are given a map of a server center, represented as a m * n integer matrix grid, where 1 means th ...

  8. ES6入门之Proxy

    1. 概述 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程. 1.1 理解 Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问 ...

  9. python 定义变量

    定义变量 什么是变量? 在程序运行过程中,其值可以改变的量 标识符(命令规范) 只能由数字.字母.下划线组成 不能以数字开头 不能是系统关键字 # 导入包import keyword​# 打印所有关键 ...

  10. mock.js 模拟数据

    1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...