伪ajax方式提交带文件上传的表单

midstr

       
       在ajax还没有流行起来的时候，因为表单使用form的action进行页面跳转提交，所以不存在什么问题。

        自从ajax流行起来之后，一般的表单都是通过ajax方式提交，所以碰到带文件上传的表单就比较麻烦。后来在网上查了一下，基本都没有比较好的解决办法，所以还是对这种特殊的表单使用页面跳转方式提交。最近看到同事用一种伪ajax方式解决了此问题。其基本原理就是在页面增加一个隐藏iframe，然后通过ajax提交除文件之外的表单数据，在表单数据提交成功之后的回调函数中，通过form单独提交文件，而这个提交文件的form的target就指向前述隐藏的iframe。代码如下(注意form的target属性指向隐藏的iframe)：
 
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;"><form style="padding:0px;margin:0px;" target="upload" action="/xxx/xx.do" id="uploadForm" name="uploadForm" encType="multipart/form-data" method="post">
                 <input  type="file" id=""attachFile/>
</form>

<iframe name="upload" style="display:none"></iframe>