easyUI dialog 快取問題引起form表單提交檔案的錯亂
最近在做專案的時候遇到一個看似簡單 但是又很頭疼的問題,功能是這樣的:使用easyUI的dialog彈出的一個form的提交檔案的上傳功能,簡單吧?就這麼簡單一個問題花了我一天的時間,當然腦子比較不靈光哈,廢話少說進入正題,遇到的問題是這樣的:在上傳檔案的時候初次操作'不選檔案直接上傳',當然會上傳失敗了!伺服器返回的沒毛病! 問題來了,,,,當dialog.close()之後從新上傳檔案,這次的操作是'選擇一個檔案'點選上傳,當然會上傳成功了!這是正常的情況下才會出現的,但是咱們說的不是正常情況,返回的結果跟第一次是一樣的,伺服器返回的額是上傳失敗!又測試了一次,重新重新整理大頁面,初次操作"選擇一個檔案",伺服器返回上傳成功!第二次操作"無論選擇檔案還是不選擇檔案"都會上傳成功,但是上傳的初次選擇的那個檔案,在繼續操作又正常了!只有初次進去的時候的前兩次操作有問題(可能測試的還不夠全面),但是就抓住這幾個現象想的我頭都大了,沒辦法問一下度娘吧,查了好多麼有找到正題,
突然看到一個部落格還是很貼近的https://www.cnblogs.com/lwucoder/archive/2017/03/16/web_cache_method.html,有興趣可以進去看看,有三種方法,一是禁止瀏覽器從本地計算機中訪問頁面的快取快取內容,二是表單每次提交以後reset()一下,三是ajax清理快取,就挨個試了下,可能遇到的情況不一樣,方法一對我無效,方法二有效,呱唧呱唧,出去抽根菸慶祝下.....然而只解決了一個現象的問題,初次上傳檔案,第二次就會上傳正常了,不是快取初次的檔案了,問題解決了,再試試初次不上傳檔案,第二次選擇一個檔案試試,心碎了......問題還在,
多方求助,最後在同事的幫助下知道了,easyUI的dialog快取問題,把dialog,$(this).dialog('destroy')掉,又試了下,好使了,都好用了,終於完事了,就在我打算出去抽一包煙慶祝的時候,又有一個新問題來了,就是dialog只能彈出來兩次(至今不知道原因),兩次操作以後就歇菜了,也是按鈕再點選不管用了,因為你把dialog destroy掉了,除非重新整理整個頁面重新在建,但是這不符合操作習慣,也很容易降低客戶體驗,所以又是一頓百度,很快就找到一個除根的方法了,那就是"操作完以後直接吧div remove掉,再從新建立一個自己的div,問題完美解決,附上解決方法:
body裡面的<div id="a"></div>
function upload(){
var dialogParent = $('#a').parent();
var dialogOwn = $('#a').clone();
dialog = $('#a').dialog({
title: '匯入',
href: '頁面',
maximizable: false,
modal: true,
onClose : function() {
dialogOwn.appendTo(dialogParent);
$(this).dialog('destroy').remove();
},
buttons: {
"取消": function () { dialog.dialog('close');},
"確定": function () { dialog.dialog('close')}
},
}
好了到此就算完美解決了,抽菸慶祝下