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实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
随机推荐
- linux环境jdk+tomcat搭建
一.什么是Linux? 和Windows操作系统软件一样,Linux也是一个操作系统软件.但是和Windows不同的是,Linux是一套开放源代码程序的.并可以自由传播的类Unix操作系统软件(Uni ...
- 【神经网络与深度学习】卷积神经网络（CNN）
[神经网络与深度学习]卷积神经网络(CNN) 标签:[神经网络与深度学习] 实际上前面已经发布过一次,但是这次重新复习了一下,决定再发博一次. 说明:以后的总结,还应该以我的认识进行总结,这样比较符合 ...
- 【Linux开发】linux设备驱动归纳总结（四）：4.单处理器下的竞态和并发
linux设备驱动归纳总结(四):4.单处理器下的竞态和并发 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- SolidWorks学习笔记5创建基准面，基准线，基准点
创建基准面 平面偏移方式 点击参考几何体,点击基准面 第一参考选中时,点击一个参考平面,粉色的 通过三个点 通过一个线和不在改线上的点 经过某一个点和某一个平面平行 一个平面绕一个轴(该轴平行或者在平 ...
- python解析库
BeautifulSoup示例: #!/usr/bin/env python # -*- coding: utf-8 -*- # author: imcati html_doc = "&qu ...
- [转帖]2015年时的新闻:Debian GNU/Hurd 2015 发布
Debian GNU/Hurd 2015 发布 oschina 发布于 2015年04月30日 https://www.oschina.net/news/62004/debian-gnu-hurd-2 ...
- 小记--------spark-Wordcount经典案例之对结果根据词频进行倒序排序
还是以经典案例Wordcount为例: 逻辑思路: 1.先把文本按空格切分成每个单词 flatMap() 2.将每个单词都转换成Tuple2类型(hello ,1) map() 3.将 ...
- Luogu P4436 [HNOI/AHOI2018]游戏
题目 我们要求出\(l_i,r_i\)表示\(i\)最远能够到达的最左边和最右边的格子. 首先有一个比较简单的暴力,就是每次我们选择一个格子,然后从当前格子开始往左右暴力扩展,找到能够到达的最远的格子 ...
- 安装Composer与PsySH
Windows安装Composer 需要开启 openssl 配置:打开 php 目录下的 php.ini,将 extension=php_openssl.dll 前面的分号去掉就可以了. https ...
- excel库中数据下载
PHP实现EXCEL下载数据 <?php include("Classes/PHPExcel.php"); $exce=new PHPExcel(); $exce->s ...