论坛首页 Web前端技术论坛

关于动态的文件上传

浏览 7286 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2006-11-16  
我有一个功能想实现获取多文件的属性  文件的数量不定
一开始我用Apache的FormFile和Struts的nest标签实现了这个功能   但是问题是我只需要获取文件的name和size
但是form在提交以后一定会编码的 所以文件大的时候这样就不行了

后来我想用Javascript来把文件的name和size填入隐藏的input里 提交的时候 就可以只获取到文件的属性了 于是我就照这个思路在自己试着写代码
但是不知道哪里有问题 始终没有通过 弄了一天了都没有解决 我JS不好想请大家帮我看下

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<title>JS Test</title>
	</head>
	<script type="text/javascript">
				var count = 0;
				function Addfile(){
					  count += 1;
					  var nextc = count-1;
					  var File1 = document.getElementById("File1");
					  var div = document.createElement("div");
					  var countTxt = document.createTextNode("");
					  
					  var inputTxt = document.createElement("input");
					  inputTxt.type = "file";
					  inputTxt.name = "uploadFile["+count+"].file";	
					  inputTxt.onchange=function(){				  
					  	var str=this.name.toString();
					  	var str1=str.slice(0, str.indexOf(".")+1)+"filename";
						var str2=str.slice(0, str.indexOf(".")+1)+"filesize";
						alert(str1);
						alert(str2);
						
						var thisform=document.forms["addpackageForm"];
						alert(thisform.name);
						var ul=this.value;
			
						var inputtext1=thisform.elements[str1];
						var inputtext2=thisform.elements[str2];
						alert(inputtext1.name);
			
						var fso = new ActiveXObject("Scripting.FileSystemObject"); 
						var f1 = fso.GetFile(ul); 
						inputtext1.value=f1.name;
						inputtext2.value=f1.size;
					  }
				  

				  
					  var inputTxt2 = document.createElement("input");
					  inputTxt2.type = "text";
					  inputTxt2.name = "uploadFile["+count+"].filename";	
					  
					  var inputTxt3 = document.createElement("input");
					  inputTxt3.type = "text";
					  inputTxt3.name = "uploadFile["+count+"].filesize";
					  
					  	  
					  var btn = document.createElement("input");
					  btn.type = "button";
					  btn.value = "取消";
					  btn.onclick = function(){
						    this.parentNode.parentNode.removeChild(this.parentNode);
						    var str = File1.innerHTML;
						    var re = /[^<]+/i;
						    var n = File1.getElementsByTagName("div");
						    for(var k=0;k<n.length;k++){
						        n[k].innerHTML = n[k].innerHTML.replace();
						        n[k].getElementsByTagName("input").item(1).onclick = this.onclick;
						    }
						    count -= 1;
				  
				  	  }
				
					  div.appendChild(countTxt);
					  div.appendChild(inputTxt);
					  div.appendChild(inputTxt2);
					  div.appendChild(inputTxt3);
					  div.appendChild(btn);
					  File1.appendChild(div);
				}
		
	</script> 
	
	<script type="text/javascript">
		function test(inputname){	
					
			var str=inputname.toString();
			var str1=str.slice(0, str.indexOf(".")+1)+"filename";
			var str2=str.slice(0, str.indexOf(".")+1)+"filesize";
			
			
			var thisform=document.forms["addpackageForm"];
			var inputfile=thisform.elements[inputname];
			var ul=inputfile.value;

			var inputtext1=thisform.elements[str1];
			var inputtext2=thisform.elements[str2];
			

			var fso = new ActiveXObject("Scripting.FileSystemObject"); 
			var f1 = fso.GetFile(ul); 
			inputtext1.value=f1.name;
			inputtext2.value=f1.size;
		}
	</script>
	<body>
		<form name="addpackageForm" method="post" action="/datahunt/addpackage.do;jsessionid=42A99092BD0D06939CAAD30B2A763DC6" enctype="multipart/form-data">
			<table>
				<tr>
	  				<td width="150">
	  					file  :  		
	    			</td>
	    		<td width="150">
	    			<input name="添加" type="button" value="添加" onClick="Addfile()"/>
	    			  
		                     
		            <input type="file" name="uploadFile[0].file" value="" onchange="test(this.name)">  
		            <input type="text" name="uploadFile[0].filename" value=""> 
		            <input type="text" name="uploadFile[0].filesize" value="">        
   				 
   				<div id="File1"></div>
   				
   			</td>	   		
	  	</tr>
			</table>
		</form>
	</body>
</html>

   发表时间:2006-11-17  
我自己实现的多文件上传是这样变通的:
使用弹出窗口,每次上传一个文件,上传成功后,将数据库中保存的文件链接/附件ID,传给主页面,使用javascript来动态添加/删除附件。
最终主页面提交的时候,带上所有附件的ID和链接。

类似邮件系统里的多文件上传。
0 请登录后投票
   发表时间:2006-11-17  
恩 谢谢 我也决定这么做了
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics