[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                 // 初始化以後，是否當即顯示對話框，默認爲 true
19                 autoOpen: false,
20 
21                 //設置彈出框的高度 400px
22                 width: 400,
23 
24                 //是否模式對話框，默認爲 false
25                 modal: true,
26 
27                 //是否容許拖動，默認爲 true
28                 draggable: true,
29 
30                 //是否能夠調整對話框的大小，默認爲 true
31                 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             //選擇文件後是否自動上傳，默認爲true
11             '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對象，單擊上傳又變成了第一次單擊。

總結

這只是一個在工做中遇到的問題，說大不大說小不小，只是遇到問題了，並對此問題一些想法，總結一下。

純屬我的想法，沒有論證，若是你對前端比較在行，能夠留個足跡給個官方的說法，再次謝過了。