实现动态生成上传文件界面--支持IE、firefox

作者：聂靖宇（niejingyu）
网址：http://xiaopihai.iteye.com/blog/469422

>>> 转载请注明出处！<<<

最近在整理struts2的东西,在做到动态实现多文件上传，所谓动态多文件上传，即所能上传文件的个数不是固定的，完全由用户自己控制！实现这个功能确实花费了一番功夫，在网上找过相关的资料，可是没有自己想要的，虽然ＪＳ会的不多，还是硬着头皮实现了！废话不多说了，先上图，看下效果吧！

　动态生成、删除的功能完全由ＪＳ来控制，详细代码如下：

<html>
	<head>
		<title>Struts2上传多个文件</title>
		<script language="javascript">
		 function addComponent(){
		 	var tmpFiles = document.getElementById("files");
		 	
		 	// 添加"文件标题："
  			var newNode = document.createElement("span");
  			newNode.innerHTML = "文件标题：";
  			tmpFiles.appendChild(newNode);
		 	
		 	// 创建文本域
			var uploadFileName = document.createElement("input");
			uploadFileName.type = "text"; 
			uploadFileName.name = "uploadFileName";
			tmpFiles.appendChild(uploadFileName);
			
			// 增加换行
			var br = document.createElement("br");
			tmpFiles.appendChild(br);	
		 	
		 	// 添加"选择文件："
		 	var newNode2 = document.createElement("span");
  			newNode2.innerHTML = "选择文件：";
  			tmpFiles.appendChild(newNode2);
		 	
			// 创建文件域
			var uploadFile = document.createElement("input");
			uploadFile.type = "file"; 
			uploadFile.name = "upload";
			tmpFiles.appendChild(uploadFile);
			
			// 添加删除按钮
			var button = document.createElement("input");
			button.type = "button";
			button.value = "move";
			//给移除按钮添加点击事件
			button.onclick = function(){
				// 切记在删除的时候一定要按顺序来
				tmpFiles.removeChild(newNode);
				tmpFiles.removeChild(uploadFileName);
				tmpFiles.removeChild(br);
				tmpFiles.removeChild(newNode2);
				tmpFiles.removeChild(uploadFile);
				tmpFiles.removeChild(button);
				tmpFiles.removeChild(br2);
				tmpFiles.removeChild(br3);
			}
			tmpFiles.appendChild(button);
			
			var br2 = document.createElement("br");
			tmpFiles.appendChild(br2);
			
			var br3 = document.createElement("br");
			tmpFiles.appendChild(br3);	
		 	
		 }
		</script>
	</head>
	<body>
		<h3>Struts2上传多个文件</h3>
		<input type="button" onclick="javascript:addComponent();" value="添加文件" />
		<br />
		<form action="upload.action" method="post" enctype="multipart/form-data">
			<span id="files"> 
				文件标题：<input type="text" name="uploadFileName" /><br/>
				选择文件：<input type="file" name="upload" />
				<br/><br/>
			</span>
			<input type="submit" value="上传" />
		</form>
	</body>
</html>

　ＪＳ代码写了老长一大段，本来没这么多，在用firefox做测试的时候，现实效果跟IE不太一样，修改之后就是上面的了！

如果哪位朋友有更简洁的实现方法，还望告知一二！

>>> 转载请注明出处！<<<

实现动态生成上传文件界面--支持IE、firefox

相关推荐