引言
最近在一個項目中，在用戶列表中需要對給沒有簽名樣本的個別用戶上傳簽名的樣本，就想到博客園中上傳圖片使用彈出框方式，博客園具體怎么實現的不知道，只是如果自己來弄，想到兩個插件的結合使用，在彈出框中使用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對象，單擊上傳又變成了第一次單擊。
總結
這只是一個在工作中遇到的問題，說大不大說小不小，只是遇到問題了，並對此問題一些想法，總結一下。
純屬個人想法，沒有論證，如果你對前端比較在行，可以留個足跡給個官方的說法，再次謝過了。