js实现动态添加上传文件页面
网络 2018-11-19 1334
发邮件是需要添加一些文件，每添加一个文件，页面上可以显示一个表单文件上传选项。
此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同时显示上传按钮，当点击删除，此行选择文件行消失，当所有选择文件项都消失时，上传按钮将被隐藏起来。下面是实例代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!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标签示例：
1 2 3 4 5 6 7 8 | //创建一个div标签，用以包含一个input标签和删除按钮 var innerdiv = document.createElement("div"); //创建一个input标签 var inputNode = document.createElement("input"); inputNode.name = "fileName"; inputNode.type="file"; innerdiv.appendChild(inputNode); |
以上就是本文的全部内容，希望对大家的学习有所帮
