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学习之格式化简述
2.2 格式化输出 2.2.1 占位符 %s就是代表字符串占位符:%d是数字占位符,%i 也可以表示数字,如果把变量后⾯的换成%d,就代表必须只能输⼊数字这时对应的数据必须是int类型. 否则程序 ...
- java位运算定义常量
简单说一下位运算 按位与(&) 参加运算的两个数,换算为二进制(0.1)后,进行与运算.只有当相应位上的数都是1时,该位才取1,否则该为为0 按位或(|) 参加运算的两个数,换算为二进制(0. ...
- docker遇到防火墙报错问题解决方法
-- 报错信息[root@localhost docker]# docker run -d -p 5000:5000 training/webapp python app.pycc61442060cb ...
- WINDOWS mysql 5.7.15 安装配置方法图文教程
因本人需要需要安装Mysql,现将安装过程记录如下,在自己记录的同时,希望对有疑问的人有所帮助. 一.下载软件 1. 进入mysql官网,登陆自己的oracle账号(没有账号的自己注册一个),下载My ...
- Analysis Methods in Neural Language Processing: A Survey
本文对神经语言处理中的分析方法进行了综述,并根据研究的突出趋势对其进行了分类,指出了存在的局限性,指出了今后研究的方向.
- layer ajax请求
layer ajax请求 $.ajax({ // url: '../php/creatSceneXml.php', url: '../php/action.php', type: 'POST', da ...
- Django基础之模型层(下)
聚合查询 关键字:aggregate from django.db.models import Max,Min,Sum,Count,Avg 统计所有书的平均价格 models.Book.objects ...
- linux 下如何将网页版应用生成桌面图标
使用linux mint已经两年了,很多国民应用,都没有Linux版,但是这些应用都有网页版,今天就说下最简单的将网页应用变成桌面应用,无需配置,安装任何插件.以微信为例; 首先,在谷歌浏览器打开网页 ...
- PHP7 错误及异常机制
关键词 error 不能在编译期发现的运行期错误,比如试图用 echo 输出一个未赋值的变量,这类问题往往导致程序或逻辑无法继续下去而需要中断: exception 程序执行过程中出现意料之外的情况, ...
- command----常用命令更新ing
common commands 1:split---拆分文件 [root@localhost split]# split -b 1M split.tar.gz split_ #按1M拆分文件 [roo ...