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实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
随机推荐
- VS快捷键操作
1.窗口快捷键记忆诀窍: 凡跟窗口挂上钩的快捷键必有一个W(Windows):Ctrl+W,W: 浏览器窗口 (浏览橱窗用有道的翻译是window shopping) Ctrl+W,S: 解决方案管理 ...
- 通过URLOS安装Redis缓存为wordpress网站提速
快!快!快!我们都知道网站的加载速度直接影响用户体验.据研究发现,网站页面在3秒内加载完毕对用户而言是最佳的浏览体验.如果超过这个时间,用户跳出网站的几率会非常大.所以对于站长来说,提高速度是他们追求 ...
- VIM全总结
Vim是Linux自带的编辑器,是Vi的高级版,刚开始使用我是一脸懵逼的,跟普通的编辑器完全不同,基本全靠键盘,写完之后也不知道怎么保存,特地花了点时间了解了一下,还是挺简单的.其中,主要包含三种模式 ...
- 解析之Apache解析
- Elasticsearch-字符串类型
ES-用于定义文档字段的核心类型 ES中一个字段可以是核心类型之一,如字符串.数值.日期.布尔型,也可以是一个从核心类型派生的复杂类型,如数组. 字符串类型 索引一类型为字符串的数据doc1: Fen ...
- PTA(Basic Level)1087.有多少不同的值
当自然数 n 依次取 1.2.3.--.N 时,算式 ⌊n/2⌋+⌊n/3⌋+⌊n/5⌋ 有多少个不同的值?(注:⌊x⌋ 为取整函数,表示不超过 x 的最大自然数,即 x 的整数部分.) 输入格式: ...
- java this的作用
this: 区分成员变量和局部变量的重名问题,this.name指的是类中的成员变量,而不是方法内部的
- 2019牛客暑期多校训练营（第五场）G - subsequeue 1 (一题我真的不会的题)
layout: post title: 2019牛客暑期多校训练营(第五场)G - subsequeue 1 (一题我真的不会的题) author: "luowentaoaa" c ...
- SSM和Spring Boot常用配置比较
一.Dao层相关 1.Mysql相关: 1.1配置DataSource连接池: (1)SSM配置: <!-- 加密后配置自己写的解析文件 --> <bean class=" ...
- iview表单验证之正则验证、函数验证
iview表单验证之正则 正则验证: 代码: loginRules: { stringLength: [ { required: true, message: '该字段不能为空', trigger: ...