HTML5实现图⽚预览功能两种⽅式实现
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 = ateObjectURL(file);
var $img = $(img);
$('#previewImg').empty().append($img);
};
}
/
/⽅式2：FileReader⽅式实现
function preview2(file) {
var reader = new FileReader();
var $img = $('<img>').attr("src", sult);
$('#previewImg').empty().append($img);
};
}
$(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 {jquery在线图片
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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。