创建动态添加上传文件页面

最新推荐文章于 2024-04-12 16:06:26 发布

阿良的空间

最新推荐文章于 2024-04-12 16:06:26 发布

阅读量1.9k

点赞数

分类专栏： javaweb javascript 文件上传下载

本文链接：https://blog.csdn.net/wl_xt/article/details/19439197

版权

javaweb 同时被 3 个专栏收录

93 篇文章 0 订阅

订阅专栏

文件上传下载

7 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

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

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

<!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="添加文件" οnclick="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);

阿良的空间

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
创建动态添加上传文件页面

发邮件是需要添加一些文件，每添加一个文件，页面上可以显示一个表单文件上传选项。此功能为：初始时刻只有一个添加按钮，当点击添加文件时，会增加一个选择文件和删除区域，同时显示上传按钮，当点击删除，此行选择文件行消失，当所有选择文件项都消失时，上传按钮将被隐藏起来。下面是实例代码：动态添加文件上传列表 var num=0; funct
复制链接

扫一扫