本文介绍如何使用JavaScript动态生成文件上传表单。通过点击按钮添加包含文件选择框和删除按钮的div区域，点击删除移除对应行。当所有上传项移除时，提交按钮自动隐藏，实现灵活的动态文件添加与删除功能。
动态文件上传功能概述
在发送邮件等场景中，通常需要附加文件。为了提升用户体验，每添加一个文件，页面应动态显示对应的文件上传表单选项。
功能逻辑与交互流程
该功能的具体逻辑为：初始状态下仅显示一个“添加”按钮。点击该按钮后，页面会增加一个包含文件选择框和删除操作的区域，同时显示“上传”按钮。若点击删除按钮，对应的文件选择行将消失；当所有文件选择项均被移除时，“上传”按钮会自动隐藏。以下是具体实现代码：
动态添加文件区域实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>动态添加文件上传列表</title>
<script type="text/javascript">
var num=0;
function addFile(event){
//创建一个div标签，用以包含一个input标签和删除按钮
var innerdiv = document.createElement("div");
//创建一个input标签
var inputNode = document.createElement("input");
inputNode.name = "fileName";
inputNode.type="file";
//创建一个删除按钮
var delNode = document.createElement("input");
delNode.name = "del";
delNode.type = "button";
delNode.value="删除";
var submit = document.getElementById("submit");
//删除当前删除按钮所在的标签,为此按钮点击事件创建一个处理函数
delNode.onclick = function d(){
this.parentNode.parentNode.removeChild(this.parentNode); //删除此div区域
var fileNodes = document.getElementsByName("fileName");
//当没有上传文件时，隐藏submit按钮
if(fileNodes.length==0){
submit.style.display="none";
}
};
innerdiv.appendChild(inputNode);
innerdiv.appendChild(delNode);
var div = document.getElementById("file");
div.appendChild(innerdiv);
submit.style.display="block";
}
</script>
</head>
<body>
<form id="upload" action="${pageContext.request.contextPath }/servlet/FileUploadServlet" enctype="multipart/form-data" method="post">
上传文件:<input type="button" value="添加文件" onclick="addFile(this.parentNode)"/> <br />
<table>
<div id="file">
</div>
</table>
<input id="submit" type="submit" value="上传" style="display: none"/>
</form>
</body>
</html>在示例代码中，`addFile` 函数负责动态生成一个 `div` 区域。该 `div` 内部包含一个 `file` 类型的 `input` 标签以及一个用于删除该行的按钮。
动态创建Input标签示例
以下是动态创建 `input` 标签的代码示例：
//创建一个div标签，用以包含一个input标签和删除按钮
var innerdiv = document.createElement("div");
//创建一个input标签
var inputNode = document.createElement("input");
inputNode.name = "fileName";
inputNode.type="file";
innerdiv.appendChild(inputNode);以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。