<%@ 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 multi-file upload form
- skill:
- Every time a dynamically add file upload input field, treat it and delete button is placed in a separate div in, and delete button onclick event in response, so that it deletes div delete button is located.
- Such as:
this.parentNode.parentNode.removeChild(this.parentNode);
