小编给大家分享一下js如何实现动态添加上传文件页面，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。
发邮件是需要添加一些文件，每添加一个文件，页面上可以显示一个表单文件上传选项。
此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同时显示上传按钮，当点击删除，此行选择文件行消失，当所有选择文件项都消失时，上传按钮将被隐藏起来。下面是实例代码：
<!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="上传" />
</form>
</body>
</html>此实例代码中，addFile将动态增加一个div区域，div区域包含一个file input标签和删除按钮。
动态创建一个input标签示例：
//创建一个div标签，用以包含一个input标签和删除按钮
var innerdiv = document.createElement("div");
//创建一个input标签
var inputNode = document.createElement("input");
inputNode.name = "fileName";
inputNode.type="file";
innerdiv.appendChild(inputNode);以上是“js如何实现动态添加上传文件页面”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
