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

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

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

！' DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题动态添加文件上传列表/title脚本类型=' text/JavaScript ' var num=0；函数addFile(事件){ //创建一个差异标签，用以包含一个投入标签和删除按钮var内部div=文档。创建元素(' div ')；//创建一个投入标签var输入节点=文档。创建元素(“输入”)；input node . name=' file name input node . type=' file//创建一个删除按钮var delNode=文档。创建元素(“输入”)；delnode . name=' deldelnode . type=' button ' delnode . value='删除；var submit=文档。getelementbyid(' submit ')；//删除当前删除按钮所在的标签，为此按钮点击事件创建一个处理函数德尔诺。onclick=函数d(){ this。父节点。父节点。移除子(这个。父节点)；//删除此差异区域var文件节点=文档。getelementsbyname(' FIlename ')；//当没有上传文件时，隐藏使服从按钮if(文件节点。长度==0){提交。风格。显示='无'；} };内部分区。append child(InputNode)；内部分区。append child(DelNode)；var div=文档。getelementbyid(' file ')；div。appendchild(内部div)；提交。风格。display=' block}/script/head正文表单id=' upload ' action=' $ { page context。请求。上下文路径}/servlet/file uploadservlet ' enctype=' multipart/form-data '方法=' post '上传文件：输入类型='按钮'值='添加文件onclick=' addFIle(this。父节点)'/br/表div id=' file '/div/表输入id=' submit '类型=' submit '值='上传style=' display : none '//form/body/html此实例代码中，添加文件将动态增加一个差异区域，div区域包含一个文件输入标签和删除按钮。

动态创建一个投入标签示例：

//创建一个差异标签，用以包含一个投入标签和删除按钮var内部div=文档。创建元素(' div ')；//创建一个投入标签var输入节点=文档。创建元素(“输入”)；input node . name=' filenameinput node . type=' file inner div。append child(InputNode)；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。