JavaWeb同步学习笔记之九十、JavaWeb_文件上传案例_JS代码

最新推荐文章于 2022-11-30 11:50:22 发布

梦ˊ

最新推荐文章于 2022-11-30 11:50:22 发布

阅读量210

点赞数

分类专栏： JavaWeb 尚硅谷_佟刚老师_JavaWeb_自学笔记文章标签：笔记 JavaWeb

本文链接：https://blog.csdn.net/baidu_38688346/article/details/88708993

版权

JavaWeb 同时被 2 个专栏收录

103 篇文章 1 订阅

订阅专栏

尚硅谷_佟刚老师_JavaWeb_自学笔记

103 篇文章 0 订阅

订阅专栏

JavaWeb_文件上传案例_JS代码

- 文件上传案例_JS代码

文件上传案例_JS代码

1.在 upload.jsp 页面上使用 jQuery 实现 “新增一个附件”，“删除附件”。但至少需要保留一个，代码实现：
upload.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {
		
		var i = 2;
		
		$("#addFile").click(function() {
			$(this).parent().parent().before("<tr class='file'><td>File" 
					+ i + ":</td><td><input type='file' name='file" 
					+ i + "' /></td></tr><tr class='desc'><td>Desc" 
					+ i + ":</td><td><input type='text' name='desc" 
					+ i + "' /><button id='delete" 
					+ i + "'>删除</button></td></tr>");
			i++;
			$("#delete" + (i - 1)).click(function() {
				var $tr = $(this).parent().parent();
				$tr.prev("tr").remove();
				$tr.remove();
				
				$(".file").each(function(index) {
					var n = index + 1;
					$(this).find("td:first").text("File" + n);
					$(this).find("td:last input").attr("name", "file" + n);
				});
				
				$(".desc").each(function(index) {
					var n = index + 1;
					$(this).find("td:first").text("Desc" + n);
					$(this).find("td:last input").attr("name", "desc" + n);
					i = ++n;
				});
				
			});
			return false;
		});
	
	});
</script>
</head>
<body>

	<font color="red">${message }</font>

	<form action="uploadServlet" method="post"
		enctype="multipart/form-data">
		<table>
			<tr class="file">
				<td>File1:</td>
				<td><input type="file" name="file1" /></td>
			</tr>
			<tr class="desc">
				<td>Desc1:</td>
				<td><input type="text" name="desc1" /></td>
			</tr>
			<tr>
				<td><input type="submit" id="submit" value="提交" /></td>
				<td><button id="addFile">新增一个附件</button></td>
			</tr>
		</table>
	</form>

</body>
</html>