<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/UpDown/css/common.css"/>
<script type="text/javascript" src="/UpDown/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({
src:largePath,
alt:largeAlt
});
return false;
});
});
function showPreview(obj){
var str = obj.value;
document.getElementById("previewImg").innerHTML="<img src='"+str +"'/>";
}
</script>
</head>
<body>
<form action="<%=request.getContextPath()%>/myServlet/UpServlet" method="post" enctype="multipart/form-data">
请选择图片：<input id="myfile" name="myfile" type="file" onchange="showPreview(this)"/>
<input type="submit" value="提交">
<div id="previewImg"></div>
</form>
<hr>
<h2>图片预览</h2>
<p><img id="largeImg" src="/UpDown/images/group.jpg" alt="Large Image"/></p>
<p class="thumbs">
<a href="/UpDown/images/im.jpg" title="Image2"><img src="/UpDown/images/im.jpg"></a>
<a href="/UpDown/images/heye.jpg" title="Image3"><img src="/UpDown/images/heye.jpg"></a>
<a href="/UpDown/images/group.jpg" title="Image4"><img src="/UpDown/images/group.jpg"></a>
</p>
</body>
</html>
