無刷新上傳文件並返回自訂值

本文簡單分享了一下個人專案中解決無刷新上傳檔案的方法和範例，有需要的小夥伴可以參考下。

今天開發過程中遇到了這樣一個問題：需要將Excel上傳至伺服器進行解析，但是在文檔不合適的情況下希望可以不刷新頁面提示用戶文檔不合適。冥思苦想了半天，在網路上找了不少資料最終試驗成功，在此分享下處理方法：

首先先說下處理思路：在頁面上添加一個隱藏的iframe，設定form表單的target屬性設定為iframe的id，這樣form提交時會將excel檔案以檔案流的形式傳到後台，在後台接收後可進行自訂操作，之後傳回的資訊將顯示在iframe中而不進行跳轉，iframe之前設定為隱藏，所以頁面不會有變化，然後我們需要監聽iframe內容的變化，然後將內容傳入主視窗中的JS方法進行下一步的自訂處理。

頁面代碼如下：

<form id="input" action="importExcel.jhtml" method="post" enctype="multipart/form-data" target="hiddenIFrame">
　　<input id="excelFile" name="file" type="file" />
　　<input type="submit" class="button" value="导入excel"/>
</form>
<iframe id=&#39;hiddenIFrame&#39; name=&#39;hiddenIFrame&#39; style="display:none;"></iframe>

JS程式碼如下(Tqeury)：

$(function(){
  $("#hiddenIFrame").load(function(){
    var wnd = this.contentWindow;
    var str = $(wnd.document.body).html();
    callback(str);
  });
})
 
function callback(info){
  alert(info);
}

後台程式碼就不過多介紹了與傳統提交一樣，後台會根據input組件的name值獲取到一個同名的文件流（例如上面頁面代碼中input組件的name是file，那麼後台接收到的是一個名字叫file的檔案流），接收後即可進行自訂操作。 更多相關教學請造訪

JavaScript教學