<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>
<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响应函数。
$("#addFile").click(function(){
//当前节点（<td>）的父节点（<tr>）加上文本域。
//before就是在什么的前加上什么。
$(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(){
//$(this)表示当前节点<button>。的父节点<td>的父节点<tr>
var $tr = $(this).parent().parent();
$tr.prev("tr").remove();
$tr.remove();
//对 i 重写排序
$(".file").each(function(index){
var n = index + 1;
//td:first 表示<td>节点的第一个节点。
$(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 = i - 1;
});
return false;
});
});
</script>
</head>
<body>
<font color="red">${message }</font>
<br><br>
<form action="fileuploadservlet" 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>
