js实现动态添加上传文件页面
程序员文章站
2023-11-28 09:31:58
发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项。
此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同...
发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项。
此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选择文件行消失,当所有选择文件项都消失时,上传按钮将被隐藏起来。下面是实例代码:
<!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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。