完整版见https://jadyer.github.io/ 首先是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" οnsubmit="return clickCheck()" enctype="multipart/form-data"> <table border="1"> <tr> <th>上传图片:</th> <td><input type="file" name="uploadFile0"> <input type="button" name="more" οnclick="clickMore()" value="More"> <input type="button" name="less" οnclick="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="上传" οnclick="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" οnclick="addMore_DOM();"/> <input type="button" value="addMore_JQuery"/> <div id="fileDiv"></div>