js实现动态添加上传文件页面
程序员文章站
2024-01-21 09:15:46
发邮件是需要添加一些文件，每添加一个文件，页面上可以显示一个表单文件上传选项。
此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同...
发邮件是需要添加一些文件，每添加一个文件，页面上可以显示一个表单文件上传选项。
此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同时显示上传按钮，当点击删除，此行选择文件行消失，当所有选择文件项都消失时，上传按钮将被隐藏起来。下面是实例代码：
<!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标签示例：
//创建一个div标签，用以包含一个input标签和删除按钮
var innerdiv = document.createelement("div");
//创建一个input标签
var inputnode = document.createelement("input");
inputnode.name = "filename";
inputnode.type="file";
innerdiv.appendchild(inputnode);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： asp.net多文件上传实例讲解