为什么我的预览出不来,求教各位大神!!!

来源:1-1 Java中的文件上传下载原理

Daniel Hinton

2017-01-21 12:06

<!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>


写回答 关注

1回答

  • 读者123
    2017-01-23 23:37:40

    路径写错了:

    如:

    <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>

    应该为:<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>


    其他一样的改,,,

Java中的文件上传下载

由简入深,轻松实现文件上传下载功能及相关框架的使用

77391 学习 · 337 问题

查看课程

相似问题