一定范围内自定义上传文件的个数

首先是DOM编程实现的

<script language="JavaScript">
	/*
	下面的JavaScript代码将实现增加和减少上传图片数量的功能
	*/
	var uploadShowed = 0;
		
	/* 单击页面中【more】按钮将执行该方法 */
	function clickMore(){
		if(0<=uploadShowed && uploadShowed<4){
			uploadShowed++; //增加一张图片上传，但是最大不能大于5张图片
			document.all("upload" + uploadShowed).style.display = ""; //使该增加的图片上传表单可视
		}else{
			alert("最多只能同时发布5张图片"); //上传的图片个数不能超过5
		}
	}
	
	/* 单击页面中【less】按钮将执行该方法 */
	function clickLess(){
		if(0<uploadShowed && uploadShowed<=5){
			document.all("upload" + uploadShowed).style.display = "none"; //使得减少的那个图片上传表单不可见
			uploadShowed--; //图片上传个数减1
		}else{
			alert("至少需要发布一张图片"); //上传的图片个数不能小于1
		}
	}
	
	/* 该方法对输入框进行初步检查数据是否合理 */
	function clickCheck(){
		if(document.form.uploadFile0.value==""){ //如果选择图片的输入框为空
			alert("请选择您要上传的图片");
			document.form.uploadFile0.focus();
			return false;
		}
		return true;
	}
</script>

<%--
其实在页面程序中已经打印出了10张图片的上传表单
只不过后9张图片上传表单通过属性style="display:none"已经被设置为不可见
而单击【More】按钮，将执行JavaScript中定义的clickMore()方法来使其中一个隐藏的图片上传表单可视
同样的【Less】按钮，将执行JavaScript中定义的clickLess()方法来使可视表单中的一个隐藏起来
从而达到动态增减上传表单的数量
--%>
<form action="#" method="POST" name="form" onsubmit="return clickCheck()" enctype="multipart/form-data">
	<table border="1">
		<tr>
			<th>上传图片：</th>
			<td><input type="file" name="uploadFile0">
				<input type="button" name="more" onclick="clickMore()" value="More">
				<input type="button" name="less" onclick="clickLess()" value="Less"></td>
		</tr>
		<tr>
			<th>图片名称：</th>
			<td><input type="text" name="picname"></td>
		</tr>
		<tr>
			<th>图片描述：</th>
			<td><input type="text" name="picdesc"></td>
		</tr>
	</table>
	
	<% for(int i=1; i<=9; i++){ %>
	<table border="1" id="upload<%=i%>" style="display:none">
		<tr>
			<th>上传图片<%=i%>：</th>
			<td><input type="file" name="uploadFile<%=i%>"></td>
		</tr>
		<tr>
			<th>图片名称：</th>
			<td><input type="text" name="picname"></td>
		</tr>
		<tr>
			<th>图片描述：</th>
			<td><input type="text" name="picdesc"></td>
		</tr>
	</table>
	<% } %>
	
	<input type="submit" value="上传" onclick="if(confirm('您确定要上传图片吗')){return true;} {return false;}">
</form>

下面是JQuery编程实现的

<script type="text/javascript" src="jquery-1.4.4.js"></script>

<script type="text/javascript">
	//全局变量
	var count = 0;
	
	//DOM编程实现
	//另外，可参考我的另一篇文章http://blog.csdn.net/jadyer/archive/2010/09/17/5889780.aspx
	var addMore_DOM = function(){
		var fileDiv = document.getElementById("fileDiv");
		var br = document.createElement("br");
		var input = document.createElement("input");
		var button = document.createElement("input");
		
		input.setAttribute("type", "file");
		button.setAttribute("type", "button");
		button.setAttribute("value", "Remove" + (++count));
		
		button.onclick = function(){
			fileDiv.removeChild(br);
			fileDiv.removeChild(input);
			fileDiv.removeChild(button);
		}
		
		fileDiv.appendChild(br);
		fileDiv.appendChild(input);
		fileDiv.appendChild(button);
	}
	
	//JQuery编程实现
	$(function(){
		$(":button[value=addMore_JQuery]").click(function(){
			var $br = $("<br/>");
			var $input = $("<input type='file'/>");
			var $button = $("<input type='button' value='Remove" + (++count) + "'/>");
			
			$("#fileDiv").append($br).append($input).append($button);
			
			$button.click(function(){
				$br.remove();
				$input.remove();
				$button.remove();
			});
		});
	});
</script>

<input type="file" />
<input type="button" value="addMore_DOM" onclick="addMore_DOM();"/>
<input type="button" value="addMore_JQuery"/>
<div id="fileDiv"></div>