js 实现图片预览的两种方式
第一种方式：（使用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 实现图片预览的两种方式的更多相关文章
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 转载：Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式
Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关 ...
- js实现页面跳转的两种方式
CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- js实现图片预览
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
随机推荐
- Unity* 实体组件系统 (ECS)、C# 作业系统和突发编译器入门
Unity* 中的全新 C# 作业系统和实体组件系统不仅可以让您轻松利用以前未使用的 CPU 资源,还可以帮助您更高效地运行所有游戏代码.然后,您可以使用这些额外的 CPU 资源来添加更多场景动态和沉 ...
- 使用torchvision下载数据集显示没有模板
配置: Anaconda+Windows+py3.7 一:首先先卸载开始的torchvision:pip uninstall torchvision 二:找到官网:https://pypi.org/p ...
- Ubuntu强制修改root密码
Ubuntu忘记超级用户root密码并重新设置密码 解决方法如下: 第一种方法——不进入recovery mode设置(推荐) 说明案例:Ubuntu版本:Ubuntu 16.04.3 LTS Ste ...
- cisco路由器配置(三) 最终网关
Gateway(config)#ip route 0.0.0.0 0.0.0.0 217.124.6.1 /*管理距离为1/orGateway(config)#ip route 0.0.0.0 0. ...
- appium环境搭建(二)----搭建android开发环境
一.安装Java环境: java 环境分JDK 和JRE ,JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境. JRE ...
- Eclipse myeclipse下配置HanLP的教程
一.说明 博主的配置 1:window10 2:myeclipse 3:jdk1.8 备注:文章分享自贾继康的博客,博客使用的hanlp是1.6.8的版本.大家可以去下载最新的1.7版本了,也比较推荐 ...
- PLSQL中查到的数据和程序中查询到的不一样
1.首先看下你的修改或者新增的SQL是否提交.
- 设计模式:建造者模式(Builder)
流水作业大家应该都清楚吧!在流水作业中,我们可以将一些复杂的东西给构建出来,例如汽车.我们都知道汽车内部构件比较复杂,由很多部件组成,例如车轮.车门.发动机.方向盘等等,对于我们用户来说我们并不需要知 ...
- IE浏览器(js)new Date()带参返回NaN解决方法
function myNewDate(str) { if(!str){ return 0; } arr=str.split(" "); d=arr[0].split("- ...
- 双指针（最大删除子串）Codeforces Round #579 (Div. 3)--Remove the Substring (hard version)
题目链接:https://codeforces.com/contest/1203/problem/D2 题意: 给你S串.T串,问你最长删除多长的子串使得S串里仍然有T的子序列. 思路: 想了好久,先 ...