两种方式实现

  • URL
  • FileReader

Index.jsp文件

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script type="text/javascript">
//方式1:URL方式实现
function preview1(file) {
var img = new Image(), url = img.src = URL.createObjectURL(file);
var $img = $(img);
img.onload = function() {
URL.revokeObjectURL(url);
$('#previewImg').empty().append($img);
};
}
//方式2:FileReader方式实现
function preview2(file) {
var reader = new FileReader();
reader.onload = function(e) {
var $img = $('<img>').attr("src", e.target.result);
$('#previewImg').empty().append($img);
};
reader.readAsDataURL(file);
}
$(function() {
//jquery实现图片点击显示
$(".thumbs a").click(function() {
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({
src: largePath,
alt: largeAlt
});
return false;
});
//实现图片预览功能:preview1使用URL方式实现;preview2使用FileReader方式实现
$('[type=file]').change(function(e) {
var file = e.target.files[0];
preview2(file);
});
}); </script> </head>
<body>
<form action="">
请选择图片:<input id="myfile" name="myfile" type="file" />
<div id="previewImg"></div>
</form>
<hr>
<h1>图片预览</h1>
<p><img id="largeImg" src="data:images/img1-lg.jpg" alt="Large Image" /></p>
<p class="thumbs">
<a href="images/img2-lg.jpg" title="image2"><img src="data:images/img2-thumb.jpg"></a>
<a href="images/img3-lg.jpg" title="image3"><img src="data:images/img3-thumb.jpg"></a>
<a href="images/img4-lg.jpg" title="image4"><img src="data:images/img4-thumb.jpg"></a>
<a href="images/img5-lg.jpg" title="image5"><img src="data:images/img5-thumb.jpg"></a>
<a href="images/img6-lg.jpg" title="image6"><img src="data:images/img6-thumb.jpg"></a> </p>
</body>
</html>

common.css文件

body {
margin: 20px auto;
padding:;
width: 580px;
font: 75%/120% Arial, Helvetica, sans-serif;
text-align:center;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg {
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
} #large{
position:absolute;
z-index:;
}

URL.revokeObjectURL方法Opera不支持,FileReader除IE9及以下不支持,其它浏览器都支持。

HTML5实现图片预览功能的更多相关文章

  1. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  2. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  4. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. 通过file文件选择图片预览功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JavaScript图片上传前的图片预览功能

    JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...

  7. 34)django-上传文件,图片预览功能实现

    目录 文件上传      1)form表单提交上传(会刷新)      2)ajax上传      3)iframe      4)图片上传预览(思路保存文件的时候,把文件保存文件的路径反馈回,客户端 ...

  8. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  9. ext图片预览功能实现,前端代码

    效果图: extjs代码: // 模型 Ext.define('ParkingAttachment', {extend: "Ext.data.Model", idProperty: ...

随机推荐

  1. e789. 限制用JSpinner实现数字选择的值

    // Create a number spinner that only handles values in the range [0,100] int min = 0; int max = 100; ...

  2. e867. 获取和设置外观

    To change the look and feel, you need to know the class name of the new look and feel. This example ...

  3. e777. 获得JList组件的所有项

    // Create a list String[] items = {"A", "B", "C", "D"}; JLis ...

  4. (实用)Eclipse中使用命令行(运行外部程序)

    备忘 http://www.oschina.net/question/28_46291 另外,在eclipse的console菜单中可以选择“new console view”(新控制台视图),这样就 ...

  5. Keystone-all 命令

    本文档介绍Icehouse版keystone-all命令 keystone-all命令在一个进程中同时启动服务和管理API,为openstack提供服务目录,授权和身份认证服务. 用法 $ keyst ...

  6. 使用appledoc 生成技术API文档具体解释

    一. 首先安装 appledoc 第一步:使用终端命令进行下载安装 git clone git://github.com/tomaz/appledoc.git cd ./appledoc sudo s ...

  7. #HTTP协议学习# (八)状态码详解

    可直接参考:http://www.cnblogs.com/TankXiao/archive/2013/01/08/2818542.html

  8. Linux 限制用户远程SSH登录

    通过/etc/hosts.allow和/etc/hosts.deny两个配置文件远程限制某个IP和某段IP地址允许或拒绝访问Linux服务器 SSH.FTP.telnet等服务,其中/etc/host ...

  9. php函数返回引用示例

    <?php class Test { public $userCache; public function init() { for($i = 0; $i < 5; $i++) { $us ...

  10. Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点

    上一篇分享了 Nginx + Tomcat 反向代理 负载均衡 集群 部署指南,感觉还是相当实用型的,但是一般集群部署是基于大访问量的,可能有的企业用不到,类似一些企业官网,访问量并不是很大,基于这个 ...