如何在bootstrap模态框弹窗中正常使用webuploader上传插件

在今日的工作中，我遇到了一道难题。公司的后端同事在使用bootstrap的模态框，并结合WebUploader来实现后台文件上传功能时，发现上传按钮点击无效。同事向我求助，经过一番研究，我找到了三种解决方案，并深入解析了它们的解决之道。

首先，让我们探究一下这个问题的核心所在：为何将上传控件置于模态框内时会出现问题，而将其放置在正常的DOM元素中则一切正常？我猜想，问题源自模态框的DOM结构初始状态为隐藏元素，其display属性为none。当对display属性为none的元素执行JavaScript代码时，这些代码将不会生效。因此，要解决这个问题，我们需要确保模态框渲染完毕，其对应的DOM节点在页面上全部加载完成后，再重新执行上传控件的JavaScript代码。

基于这一思路，我提出了以下三种解决方案：

1、使用uploader.refresh(); 在模态框加载完成之后，执行这个函数，示例代码如下。

$(‘#myModal‘).on(‘shown.bs.modal‘, function () {
   //在模态框加载完成之后执行重绘按钮的方法。
   uploader.refresh();
});

2、在模态框加载完成之后，重新绘制按钮，示例代码如下。

function create_Upbox(){
       uploader.addButton({
       id: '#picker',
       innerHTML: '选择文件'
       });
}
$('#myModal').on('shown.bs.modal', function () {
    create_Upbox();
});

3、在模态框弹窗执行完之后，再执行上传控件按钮的js代码，示例代码如下。

$('#myModal').on('hide.bs.modal', function () {
        uploader.destroy();
});