iframe模擬無刷新上傳文件

    之前上傳文件用form表單上傳,雖然能夠用,可是會閃一下,有點醜,就去找ajax上傳文件的插件,看着有點麻煩,就想換別的方法,看到還有用iframe的,就本身試着上傳,最後成功了.如今把它寫出來,但願能給須要的人一點幫助.

我作的是java web項目,前端是 jsp 頁面.

<form id="imgForm" enctype="multipart/form-data" action="url" method="post"  target="image_iframe">

     <input type="file" onchange="uploadFile(this)" id="file" name="file" >
</form>

 

<iframe id="image_iframe" name="image_iframe" style="display:none;">
 </iframe>

重點在  iframe 的target 屬性,我忘記它對應的是iframe 的id 仍是name.總之同樣就好.必定要寫!!!!

當文件選定,而且符合條件以後,就能夠  $("#imgForm").submit() .開始form表單提交.因爲有iframe,因此form表單裏的東西會在iframe中上傳,頁面不會閃.

在後臺,和用form表單上傳同樣,進行文件的讀寫.當文件複製成功以後.須要獲得:

PrintWriter out = response.getWriter(); 

out.println("<script>parent.callbackHeadImg('"+url+"')</script>");  

在iframe中,就會輸出 <script>parent.callbackHeadImg(url)</script>

他就會去調用你文件上傳那裏的  function callbackHeadImg(msg){

XXXX

}這個方法.

我用的java,springMVC框架.方法返回值是Object 類型,我返回null,效果以下圖

才成功調用了callbackHeadImg函數

其餘的返回值,若是是個具體路徑,路徑所在頁面就會出如今上傳的iframe中,以下圖.

但願能幫到須要的人.