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

2018-10-22 6 阿良的空间

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

展开阅读全文

更多Javascript文章

JQuery从头学起第二讲
Jul 04 8
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 4
判断JS对象是否拥有某种属性的两种方式
Dec 02 5
JS delegate与live浅析
Dec 21 7
理解javascript函数式编程中的闭包(closure)
Mar 08 5
利用angular、react和vue实现相同的面试题组件
Feb 19 16
Vue组件模板的几种书写形式(3种)
Feb 19 10
手机访问当前页面