最近公司專案修改上傳檔案效果，大致效果就是上傳檔案提交時不能進行頁面跳轉，然後最好是沒有提交按鈕，用jquery實現表單的提交。想了想，用ajax好像不太好實現這種效果了，首先是ajax如何把上傳的檔案傳遞給後臺就遇到了瓶頸；其次再是如何配合ajax實現jquery提交表單，最後在網上查了下資料，用iframe標籤來實現會非常的方便。

實現步驟

• 首先在頁面上寫上iframe標籤，並將iframe標籤的style設定為“display：none”，而且將iframe標籤的name屬性設定為，這裡我們就將iframe標籤的name屬性設定為disIframe
• 其次，將檔案上傳表單的target屬性設定為iframe標籤設定的name屬性值，上邊我們已經設定為disIframe
• 再就是我們給檔案上傳的form設定一個id ,這裡我們設定為fileupload,利用jquery的id選擇器得到這個form,並呼叫其submit方法就可以得到在jquery中不跳轉頁面提交檔案上傳表單
• 最後，可以判斷通過提交給iframe標籤的內容來執行相應操作

就單單看iframe執行的這個邏輯，我們就可以看出其實執行邏輯和ajax似乎沒有區別，的卻，在ajax還沒有火起來的時候，都是用iframe來執行類似於ajax的功能的。

詳細說明

• iframe標籤的設定

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

<form  id="fileupload" action="report/singlecheckupload.koala" method="post" enctype="multipart/form-data" target="disIframe">

<input type="file"  name="file">

</form>

  $(
 
"#fileupload").submit();

  $("#disIframe").load(function() {
            var body = $(window.frames['disIframe'].document.body);
            console.log(body);

            if (body[0].textContent == "success") {
            }
        });

在訪問上邊form的action的時候，可能會返回success，可能會返回error，通過判斷body[0].textContent值來執行form提交完成後的程式碼邏輯。

總結

iframe加上jquery提交可以實現頁面無跳轉，不必要單獨去點選form的提交按鈕去執行form提交。