使用JavaScript进行动态的网页窗体组件的添加是一件很方便也很容易实现的事情。话不多说，边看代码边做解释吧。
准备工作
- 由于html页面中不可以添加java代码，所以我在jsp页面中进行了测试。
- 添加的窗体是作为一个子窗体嵌套在外层窗体组件中的，优点在于方便整体的删除和修改操作
- 注意为添加的窗体组件添加name属性。
代码展示
<html>
<title>动态添加表单输入项的测试</title>
<head></head>
<script type="text/javascript">
function addfile(){
var files = document.getElementById("files");
var input = document.createElement("input");
input.type='file';
input.name='file';
var btn = document.createElement("input");
btn.type='button';
btn.value='删除';
btn.onclick = function del(){
this.parentNode.parentNode.removeChild(this.parentNode);
}
var div = document.createElement("div");
div.appendChild(input);
div.appendChild(btn);
files.appendChild(div);
}
</script>
<body>
<table>
<tr>
<td>上传用户</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>上传文件</td>
<td>
<input type="button" value="添加上传文件" onclick="addfile()">
</td>
</tr>
<tr>
<td></td>
<td>
<div id="files"></div>
</td>
</tr>
</table>
</body>
</html>PS：
- 也因为是简单的测试，所以没有进行代码的优化
- 没有添加java脚本，仅做显示的功能
测试结果
- 点击“添加上传文件”一次后：
点击“添加上传文件”四次后：
点击“删除”后：
小总结
优点：
- 使用js的方式可以优化用户体验，减轻服务器端的压力
- 高效快速
缺点：
- 不能防止用户恶意使用
- 不能应对所有复杂的文件上传处理
![[译]: Vue.js 函数式组件：what, why & when?](https://ucc.alicdn.com/pic/developer-ecology/hid5ykfodc62m_49a2253b8cb446d4b3ce7ead1cdfb9fc.png?x-oss-process=image/resize,h_160,m_lfit)