WebUploader 上傳插件結合bootstrap的模態框使用時選擇上傳文件按鈕無效問題的解決方法

      因爲種種緣由（工做忙，要鍛鍊健身，要看書，要學習其餘興趣愛好，談戀愛等），博客已經很久沒有更新，爲這個心裏一直感受很愧疚，今天開始決定繼續更新博客，每週至少一篇，最多不限篇幅。

      今天說一下，下午在工做中遇到的一個問題：公司的後端同事用bootstrap的模態框，結合WebUploadder作後臺上傳文件的功能的時候，發現上傳按鈕點擊無效。同事過來請求我支援，我研究了下，發現了三種解決方案，下面具體說說是這三種方法是怎麼解決的。

      咱們先來分析一下解決這個問題的思路：

      爲何上傳控件放到模態框裏面就不行了呢？而不在模態框的正常dom下倒是能夠的。我猜想致使問題的緣由是由於模態框的dom結構剛開始是隱藏的元素display：none，而對diaplay：none的元素執行js，是不會生效的，要解決這個問題，咱們就要在模態框渲染完以後，模態框對應的dom節點在頁面上都加載完成以後從新去執行上傳控件的js。因而出現了下面三種解決方案。

      方案一：

      使用uploader.refresh();

      在模態框加載完成以後，執行這個函數，代碼以下。

     

    //create()
    var uploader = WebUploader.create({
        // swf文件路徑
        swf:'webuploader/Uploader.swf',

        // 文件接收服務端。
        server: 'http://webuploader.duapp.com/server/fileupload.php',

        // 選擇文件的按鈕。可選。
        // 內部根據當前運行是建立，多是input元素，也多是flash.
        pick: '#picker',

        // 不壓縮image, 默認若是是jpeg，文件上傳前會壓縮一把再上傳！
        resize: true
    });
    $('#myModal').on('shown.bs.modal', function () {
       uploader.refresh();//在模態框加載完成以後執行重繪按鈕的方法。
    });

      方案二：

      在模態框加載完成以後，從新繪製按鈕。

     代碼以下：  

 1 var uploader = WebUploader.create({
 2         // swf文件路徑
 3         swf:'webuploader/Uploader.swf',
 4 
 5         // 文件接收服務端。
 6         server: 'http://webuploader.duapp.com/server/fileupload.php',
 7 
 8         // 選擇文件的按鈕。可選。
 9         // 內部根據當前運行是建立，多是input元素，也多是flash.
10         pick: '#picker',
11 
12         // 不壓縮image, 默認若是是jpeg，文件上傳前會壓縮一把再上傳！
13         resize: true
14     });
15     function create(){
16        uploader.addButton({
17        id: '#picker',
18        innerHTML: '選擇文件'
19        });
20     }
21     $('#myModal').on('shown.bs.modal', function () {
22       //uploader.refresh();
23        create()
24     });

      方案三：

      在模態框執行完以後再執行，上傳控件按鈕的js

     

 1 var uploader = null;
 2     $('#myModal').on('shown.bs.modal', function () {
 3         //uploader.refresh();
 4         //create()
 5         uploader = WebUploader.create({
 6         // swf文件路徑
 7         swf:'webuploader/Uploader.swf',
 8         // 文件接收服務端。
 9         server: 'http://webuploader.duapp.com/server/fileupload.php',
10 
11         // 選擇文件的按鈕。可選。
12         // 內部根據當前運行是建立，多是input元素，也多是flash.
13         pick: '#picker',
14 
15         // 不壓縮image, 默認若是是jpeg，文件上傳前會壓縮一把再上傳！
16         resize: true
17         });
18     });
19     //關閉模態框銷燬WebUploader，解決再次打開模態框時按鈕越變越大問題，同時爲了節約內存，銷燬沒必要要的內存開銷。
20     $('#myModal').on('hide.bs.modal', function () {
21         uploader.destroy();
22     });

注意第三種方法，必需要在關閉模態框以後執行上傳控件銷燬事件，以節省內存開銷。

模態框渲染過程當中不一樣生命週期如何調用函數，能夠查看bootstap的模態框api，

 

從這個例子中，須要瞭解，開發一個控件的時候，必定要定義方法可以對不一樣的週期進行控制，而且要定義銷燬控件的方法，只有這樣纔是一個完整的好用的控件，經過這個案例對vue的生命週期函數也有了更進一步的理解。