多附件上传

如上:点击 【添加附件】按钮，自动添加下面一整行，form保存就可以保存多个。想要移除，就点【删除】，就能移除一整行。

html页面代码:

<form class="registerform"  action="<%= request.getContextPath() %>/practiceUnit/regist" method="post" enctype="multipart/form-data">
    <span style="white-space:pre">	</span><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="right">附件<b></b></td>
            <td id="pu_files">
            <span style="white-space:pre">	</span><input class='filebtn' type="button" value="添加附件" onclick="addFile()"/>
            </td>
            <td>&nbsp;</td>
          </tr>
<span style="white-space:pre">	</span>   <tr>
            <td height="80" align="right">&nbsp;</td>
            <td colspan="2" valign="bottom" class="btnTd">
            <input type="submit" class="subBtn" id="subBtn" value="提交"/><input type="reset" class="reBtn"  value="重置"/></td>
          </tr>
<span style="white-space:pre">	</span> </table>
</form><span style="font-family: Arial, Helvetica, sans-serif;">		</span>

【添加附件】方法和【删除】方法:

<script type="text/javascript">
    var index=0;
<span style="white-space:pre">	</span>//添加文件
    function addFile(){
<span style="white-space:pre">		</span>var fileHtml = '<input type="text" name="textfield" class="pathbox" id="textfield_'+index+'">'+  
 <span style="white-space:pre">			</span>'<input type="button" class="btn" value="浏览...">'+
<span style="white-space:pre">		</span>'<input type="file" class="file" name="myfiles" id="fileField_'+index+'" size="28" onchange="$(\'#textfield_'+index+'\').val(this.value)">';
// <span style="white-space:pre">		</span>var strFile="<h6><input class='filebtn' name='myfiles' type='file'/>";
<span style="white-space:pre">		</span>var strFile="<h6 class='file-box' style='margin:5px 0;'>"+fileHtml;
    <span style="white-space:pre">	</span> var deleButton="<a href='javascript:void(0)' style='margin-left:10px;' onclick='deleteFile(this)'>删除</a><br/></h6>";
    <span style="white-space:pre">	</span> document.getElementById("pu_files").insertAdjacentHTML("beforeEnd",strFile+deleButton);
    <span style="white-space:pre">	</span> index++;
    }  
   
<span style="white-space:pre">	</span>//移除添加的文件
     function deleteFile(o) {
<span style="white-space:pre">		</span>
       while (o.tagName != "H6"){  o = o.parentNode;}
       o.parentNode.removeChild(o);
     }
<span style="white-space:pre">	</span>
</script>

说明:  1.添加的时候，注意添加的多个行的input=file的 id不能重复，我上面是id+index了。

   2.移除的时候，是移除一整行，是依次向上找H6标签，使用h6标签的时候要注意一下了。