天天看點

[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了

最近在一個項目中,在使用者清單中需要對給沒有簽名樣本的個别使用者上傳簽名的樣本,就想到部落格園中上傳圖檔使用彈出框方式,部落格園具體怎麼實作的不知道,隻是如果自己來弄,想到兩個插件的結合使用,在彈出框中使用uploadify插件進行上傳,每次都會報錯很是無語,最後找到解決方案,這裡記錄一下,算是對工作中遇到的bug的一個總結。

[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了

這是vs調試狀态下,顯示的資訊。在浏覽器端,點選第一次上傳按鈕,正常,将彈出框關閉後,第二次打開,就會出現問題:

第一次單擊上傳:

[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了

第二次,關閉彈出框,再次單擊上傳:

[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了

單擊是:

f12

[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了

調試

[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了

就是這個問題,頭疼啊,在其他浏覽器正常,在ie下被坑死了。

沒辦法隻能想辦法解決啊。

這地方出現錯誤“null”為空或不是對象bug,猜測是找不到flash的id(swfupload_0)了,是以出現null,就會出現這個bug。

head标簽内的js,代碼不再說明,寫有注釋:

[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了
[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了

html

最後是uploadify代碼,清單中的a标簽實在cs檔案拼接的,這裡不再列出,uploadify放在html标簽後面:

[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了
[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了

方法一

開始想了,既然重新整理一下就不會出現該bug,就在彈出框關閉時将頁面重新整理。在彈出框的close的回調方法中添加代碼:window.location.reload();每次彈出框關閉時,加個頁面重新重新整理一下,雖然解決了問題,但是,使用者體驗并不好,每次重新整理,就會重新去讀一次資料庫,最後放棄了這個方式。

方法二

在彈出框的close的回調方法中,添加如下代碼:

再次測試,問題解決。

問題解決了,為什麼這就能解決問題呢?

猜想,第一次單擊上傳,根據上面列出的代碼,可知每單擊上傳,就會通過uploadify方法建立上傳flash對象,此時$('#btnupload').length=1,此時id為(swfupload_0))的對象已經确定,關閉彈出框,但falsh對象仍然存在,并沒有銷毀。

再次單擊的時

[js]uploadify結合jqueryUI彈出框上傳,js中的冒出的bug,又被ie坑了

不再建立id為(swfupload_0))的flash對象,還是第一次建立的flash對象占着茅坑不拉屎(占着id,但名沒有建立對象),是以此時為null,為了保持id的唯一性?,ie對此有限制?,是不是其他浏覽器,在id存在的情況下,會随機生成一個新的id?不是搞前端的,不得而知了。

這也是自己的猜想,有高手的話,可以給個官方的說法,如果我這個猜想成立,那麼也從側面印證了為什麼重新整理一下,就沒有那個bug了,重新整理又重新加載html并且銷毀了flash對象,單擊上傳又變成了第一次單擊。

這隻是一個在工作中遇到的問題,說大不大說小不小,隻是遇到問題了,并對此問題一些想法,總結一下。

純屬個人想法,沒有論證,如果你對前端比較在行,可以留個足迹給個官方的說法,再次謝過了。

部落格位址:

<a href="http://www.cnblogs.com/wolf-sun">http://www.cnblogs.com/wolf-sun/</a>

部落格版權:

本文以學習、研究和分享為主,歡迎轉載,但必須在文章頁面明顯位置給出原文連接配接。

如果文中有不妥或者錯誤的地方還望高手的你指出,以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下!如果你有更好的建議,不如留言一起讨論,共同進步!

再次感謝您耐心的讀完本篇文章。

轉載:http://www.cnblogs.com/wolf-sun/p/3703364.html