js实现动态添加上传文件页面

2019-11-19 12:39:28

字体：大中小

来源：转载

供稿：网友

发邮件是需要添加一些文件，每添加一个文件，页面上可以显示一个表单文件上传选项。

此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同时显示上传按钮，当点击删除，此行选择文件行消失，当所有选择文件项都消失时，上传按钮将被隐藏起来。下面是实例代码：

<!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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js异步上传多张图片插件的使用方法

下一篇：Javascript 实现 Excel 导入生成图表功能