两种方式实现
- 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="images/img1-lg.jpg" alt="Large Image" /></p>
<p class="thumbs">
<a href="images/img2-lg.jpg" title="image2"><img src="images/img2-thumb.jpg"></a>
<a href="images/img3-lg.jpg" title="image3"><img src="images/img3-thumb.jpg"></a>
<a href="images/img4-lg.jpg" title="image4"><img src="images/img4-thumb.jpg"></a>
<a href="images/img5-lg.jpg" title="image5"><img src="images/img5-thumb.jpg"></a>
<a href="images/img6-lg.jpg" title="image6"><img src="images/img6-thumb.jpg"></a>
</p>
</body>
</html>
common.css文件
body {
margin: 20px auto;
padding: 0;
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:999;
}
URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其它浏览器都支持。
时间： 2024-08-02 15:14:09