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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  
  < >动态添加文件上传列表</ >
  <  type="text/ ">
   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.  = 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";
   
   }
  </ >
 
 </head>
 
 <body>
  <form id="upload" action="${pageContext.request.contextPath }/servlet/FileUploadServlet" enctype="multipart/form-data" method="post">
   上传文件:<input type="button" value="添加文件"  ="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);

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章