<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>文件上传</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <script type="text/javascript" src="script/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var i=2; //1.获取#addFile,添加click事件 $("#addFile").click(function(){ //2.生成节点放到#br的前面 /* 节点如下设置： <tr><td>file2:</td><td><input type="file" name="file2"/></td></tr> <tr><td>desc2:</td><td><input type="text" name="desc2"/></td></tr> */ var innerHtml = "<tr><td>file"+i+":</td><td><input type='file' name='file"+i+"'/></td></tr>"+ "<tr><td>desc"+i+":</td><td><input type='text' name='desc"+i+"'/><button type='button'>删除</button></td></tr>"; $("#end").before(innerHtml).prev("tr").find("button").click(function(){ alert(123); $(this).parents("tr").prev("tr").remove(); $(this).parents("tr").remove(); i--; }); i++; }); }); </script> </head> <body> <font color="red">${message }</font> <br/><br/> <form action="uploadServlet" method="post" enctype="multipart/form-data"> <table> <tr> <td>file1:</td> <td><input type="file" name="file1"/></td> </tr> <tr> <td>desc1:</td> <td><input type="text" name="desc1"></td> </tr> <tr id="end"> <td><input type="submit" value="submit"/></td> <td><button id="addFile" type="button">新增一个附件</button></td> </tr> </table> </form> </body> </html>
form表单中<button>未设置type=“button”时，点击该button,表单自动提交到uploadServlet,为<button>添加type属性后该bug不再出现