<!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>圖片預(yù)覽</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>
2017-01-23
路徑寫錯了：
如：
<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>
??<a?href="/UpDown/images/im.jpg"?title="Image2"><img??src="/UpDown/images/im.jpg"></a>
應(yīng)該為：<link?rel="stylesheet"?type="text/css"?href="css/common.css"/>
<script?type="text/javascript"?src="js/jquery-3.1.1.min.js"></script>
? <a?href="images/im.jpg"?title="Image2"><img??src="images/im.jpg"></a>
其他一樣的改，，，