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的生命周期函数也有了更进一步的理解。