<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>多文件上传</title>
<script type="text/javascript">
function addFile(){
var div=document.getElementById("content");
div.innerHTML+="<div><input type='file' name='f'><input type='button' value='remove file' οnclick='removeFile(this)'></div>";
}
function removeFile(btn){
document.getElementById("content").removeChild(btn.parentNode);
}
</script>
</head>
<body>
<input type="button" value="add File" οnclick="addFile();">
<br>
<br>
<form action="${pageContext.request.contextPath}/upload4" method="post" encType="multipart/form-data">
<input type="file" name="f"><br>
<div id="content">
</div>
<input type="submit" value="上传">
</form>
</body>
</html>
JavaScript的多文件上传表单
- 技巧：
- 每次动态增加一个文件上传输入框，都把它和删除按纽放置在一个单独的div中，并对删除按纽的onclick事件进行响应，使之删除删除按纽所在的div。
- 如：
this.parentNode.parentNode.removeChild(this.parentNode);
