form+iframe 实现ajax文件上传

在做文件上传时除了传入文件外，还有附件参数，并且要求不刷新页面，之前是表单提交的方式，现在修改成ajax上传的方式，由于没有选择用插件，所以用form+iframe的方式，并且这种方式对IE8以上及主流浏览器都支持。

1、首先写一个iframe

?

1	<iframe name="myiframe" style="display:none;" onload="iframeLoad(this)"></iframe>

　　

2、创建文件上传的form，form的target属性值和iframe的name一致

?

1 2 3 4

<form id="upload" action="${webRoot }/tlTrialCalculation/doImport"  method="post"  enctype="multipart/form-data" target="myiframe">     <input type="hidden" name="processId" value="${processId }">     <input id="upload" type="file" name="file" size="28" onChange="uploadFile()" accept="image/jpeg,image/png"/> </form>

　　

3、为文件按钮编写onChange事件触发的方法

?

1 2 3 4 5

function uploadFile（）{   $('#upload).submit();   }

　　

4、编写iframe的加载完成方法，在这里处理上传成功后的操作

?

1 2 3 4 5 6 7 8

function iframeLoad(ifame){   var doc = iframe.contentWindow.document; var html = doc.body.innerHTML;   html   }