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

2019-11-17 01:31:26

字體：大中小

來源：轉載

供稿：網友

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

引言

最近在一個項目中，在用戶列表中需要對給沒有簽名樣本的個別用戶上傳簽名的樣本，就想到博客園中上傳圖片使用彈出框方式，博客園具體怎么實現的不知道，只是如果自己來弄，想到兩個插件的結合使用，在彈出框中使用uploadify插件進行上傳，每次都會報錯很是無語，最后找到解決方案，這里記錄一下，算是對工作中遇到的bug的一個總結。

bug

這是vs調試狀態下，顯示的信息。在瀏覽器端，點擊第一次上傳按鈕，正常，將彈出框關閉后，第二次打開，就會出現問題：

第一次單擊上傳：

第二次，關閉彈出框，再次單擊上傳：

單擊是：

try { document.getElementById("SWFUpload_0").SetReturnValue(__Flash__toxml(SWFUpload.instances["SWFUpload_0"].testExternalInterface()) ); } catch (e) { document.getElementById("SWFUpload_0").SetReturnValue("<undefined/>"); }

F12

調試

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

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

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

相關代碼

head標簽內的js，代碼不再說明，寫有注釋：

 1     <style type="text/CSS"> 2         /*隱藏上傳的進度條*/ 3         .uploadify-queue { 4             display: none; 5         } 6     </style> 7     <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script> 8     <link href="Scripts/uploadify/css/uploadify.css" rel="stylesheet" /> 9     <script type="text/Javascript" src="Scripts/uploadify/js/uploadify3.2.1/jquery.uploadify.js"></script>10     <link href="Scripts/JqueryUI/css/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" />11     <script type="text/javascript" src="Scripts/JqueryUI/js/jquery-ui-1.10.4.custom.js"></script>12     <script type="text/javascript">13         $(function () {14 15             //彈出框的初始化方法16             $("#dialog").dialog({17 18                 // 初始化之后，是否立即顯示對話框，默認為 true19                 autoOpen: false,20 21                 //設置彈出框的高度 400px22                 width: 400,23 24                 //是否模式對話框，默認為 false25                 modal: true,26 27                 //是否允許拖動，默認為 true28                 draggable: true,29 30                 //是否可以調整對話框的大小，默認為 true31                 resizable: true,32 33                 //彈出框的標題34                 title: "上傳簽名樣本",35 36                 /*用來設置對話框的位置，有三種設置方法 37                      1.  一個字符串，允許的值為  'center', 'left', 'right', 'top', 'bottom'.  38                      此屬性的默認值即為 'center'，表示對話框居中。39                      2.  一個數組，包含兩個以像素為單位的位置，例如， var dialogOpts = { position: [100, 100] };40                      3. 一個字符串組成的數組，例如， ['right','top']，表示對話框將會位于窗口的右上角。41                      例如：var dialogOpts = {  position: ["left", "bottom"]    };*/42                 position: "center",43                 close: function () {44                  45                     //if ($('#btnUpload').length > 0) { //注意jquery下檢查一個元素是否存在必須使用 .length >0 來判斷46 47                     //    $('#btnUpload').uploadify('destroy');48 49                     //} 50                 }51 52             });53         });54     </script>

html

1   <div id="dialog" title="上傳簽名樣本" style="text-align: center; display:none; ">2                 <input type="button" name="name" id="btnUpload" value="上傳樣本" />3                 <span>(只能上傳.sign格式文件)</span>4             </div>

最后是uploadify代碼，列表中的a標簽實在cs文件拼接的，這里不再列出，uploadify放在html標簽后面：

 1     function Upload(strCode) { 2         //打開彈出框的按鈕 3         //單擊按鈕 調用彈出框的open方法 4         $("#dialog").dialog("open"); 5  6         //上傳 7         //上傳插件初始化方法 8         $('#btnUpload').uploadify({ 9 10             //選擇文件后是否自動上傳，默認為true11             'auto': true,12             //選擇文件按鈕   13             'buttonClass': 'some-class',14 15             //設置按鈕文本16             'buttonText': '上傳樣本',17 18             //單個文件大小，0為無限制，可接受KB,MB,GB等單位的字符串值 上傳大文件 可參考使用手冊說明               19             'fileSizeLimit': '0',20             'queueSizeLimit': 1,21             //文件描述22             'fileTypeDesc': 'Files',23             'multi': false,24             //允許上傳的文件類型 以分號分割25             'fileTypeExts': '*.sign',26             'onUploadStart': function (file) {27                 $("#btnUpload").uploadify("settings", "formData", { 'code': strCode });28             },29             //FLash文件路徑30             'swf': '/Scripts/uploadify/js/uploadify3.2.1/uploadify.swf',31             //上傳文件處理后臺頁面32             'uploader': '/Ashx/SampleUp.ashx?action=mainUpload',33             //上傳成功后觸發，每個文件都觸發34             'onUploadSuccess': function (file, data, response) {35                 window.location.reload();36 37             }38         });39     }

解決方案

方法一

開始想了，既然刷新一下就不會出現該bug，就在彈出框關閉時將頁面刷新。在彈出框的close的回調方法中添加代碼：window.location.reload();每次彈出框關閉時，加個頁面重新刷新一下，雖然解決了問題，但是，用戶體驗并不好，每次刷新，就會重新去讀一次數據庫，最后放棄了這個方式。

方法二

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

1                 close: function () {2                  3                     if ($('#btnUpload').length > 0) { //注意jquery下檢查一個元素是否存在必須使用 .length >0 來判斷4                         $('#btnUpload').uploadify('destroy');//如果存在，則將其銷毀5                     } 6                 }

再次測試，問題解決。

問題解決了，為什么這就能解決問題呢？

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

再次單擊的時

try { document.getElementById("SWFUpload_0").SetReturnValue(__flash__toXML(SWFUpload.instances["SWFUpload_0"].testExternalInterface()) ); } catch (e) { document.getElementById("SWFUpload_0").SetReturnValue("<undefined/>"); }

不再創建id為（SWFUpload_0)）的flash對象，還是第一次創建的flash對象占著茅坑不拉屎（占著id，但名沒有創建對象），所以此時為null，為了保持id的唯一性？，ie對此有限制？，是不是其他瀏覽器，在id存在的情況下，會隨機生成一個新的id？不是搞前端的，不得而知了。

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