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实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
随机推荐
- 【Python开发】网页爬取心得
转载:python 爬虫抓取心得分享 title:python 爬虫抓取心得分享 0x1.urllib.quote('要编码的字符串')如果你要在url请求里面放入中文,对相应的中文进行编码的话,可以 ...
- Emgu 学习(7)threshold ，图像过滤
Threshold 代码如下 static void Main(String[] args) { Mat img = CvInvoke.Imread(@"C:\Users\dell\Pict ...
- linux shadow文件格式弱口令解密
shadow格式弱口令为linux弱口令,通过kali linux 终端 john --w=字典 加上shadow文件, 扫描完成之后通过john --show 加上shadow文件出结果
- 布隆过滤器（Bloom Filter）原理以及应用
应用场景 主要是解决大规模数据下不需要精确过滤的场景,如检查垃圾邮件地址,爬虫URL地址去重,解决缓存穿透问题等. 布隆过滤器(Bloom Filter)是1970年由布隆提出的.它实际上是一个很长的 ...
- 2019牛客暑期多校训练营（第一场）-A （单调栈）
题目链接:https://ac.nowcoder.com/acm/contest/881/A 题意:给定两个长度均为n的数组a和b,求最大的p使得(a1,ap)和(b1,bp)等价,等价的定义为其任意 ...
- java并发学习资料
1.Java 并发编程知识梳理以及常见处理模式 https://github.com/Fadezed/concurrency 2.Java 高并发多线程编程系列 https://github.com/ ...
- 【转贴】GS464/GS464E
GS464/GS464E GS464为四发射64位结构,采用动态流水线.其1.0版本(简称GS464)为9级流水线结构,在龙芯3A.3B.2H中使用.其2.0版本(简称GS464E)为12级动态流水线 ...
- Spread.NET 表格控件 V12.1 正式发布
Spread.NET 表格控件 V12.1 正式发布 加入动态数组,让公式运算更具效率 Spread.NET 是一个在功能和布局上与 Excel 高度类似的 .NET表格控件,目前已广泛应用于财务.预 ...
- Ubuntu - Ubuntu应用记录（2）
1.安装Ubuntu16.04的一种分区分案(240G固态硬盘小例) 1.创建boot分区(引导分区)-> 512M ->逻辑分区->空间起始位置->Ext4日志文件系统-&g ...
- 初入JavaWeb（半成品）
2019-10-21 20:51:03 初次进行Javaweb的开发. 要求: 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求显示“• ”或“*”表示 ...