ex-6.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
function setFileCount() {
$(".fileCount").each(function(index){
$(this).text('附件' + (index + 1)) ;
}) ;
}
$("#addFile").click(function(){
$("<tr></tr>").append("<td class='fileCount'></td>")
.append($("<td><input type='file' name='file'><button>Delete</button></td>"))
.insertBefore("#content")
.find("button")
.click(function(){
$(this).parent().parent().remove() ;
setFileCount() ;
}) ;
setFileCount() ;
return false ;
});
}) ;
</script>
</head>
<body>
<form name="mailForm" method="post" action="/javamail/mail.do" enctype="multipart/form-data">
<table>
<tr>
<td>
主题:
</td>
<td>
<input type="text" name="subject" value="">
</td>
</tr>
<tr>
<td>
收件人:
</td>
<td>
<input type="checkbox" name="mailTo" value="hello@itcast.cn">hello
<input type="checkbox" name="mailTo" value="test@itcast.cn">test
<input type="checkbox" name="mailTo" value="abc@itcast.cn">abc
<input type="checkbox" name="mailTo" value="msn@itcast.cn">msn
</td>
</tr>
<tr>
<td class='fileCount'>
附件1:
</td>
<td>
<input type="file" name="file" value="">
<button id="addFile">
AddFile
</button>
</td>
</tr>
<tr id="content">
<td>
邮件内容:
</td>
<td>
<textarea name="content">
</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>