webuploader在bootstrap模态框中使用时候无法点击

[chjjhc123]

在bootstrap模态框中使用webuploader，选择图片那个按钮无法点击，遇到3种情况

第一种是在弹出模态框时create，这样每次弹出模态框之后都加载一个边框，使按钮越来越大
第二种情况是首先create一个webuploader，然后在弹出模态框事件中调用addbutton事件，这样无法点击，但是按F12调试就变正常了。
还有一种是把“uploadProgress”，“uploadSuccess”等一些操作都写在模态框弹出事件中，这样选择图片的按钮只有左上角一小点可以点，同样按F12后又正常了

求大神帮忙！
部分代码：
引用js：

    <script type="text/javascript" src="~/assets/javascripts/jquery/jquery-1.8.3.min.js"></script>
    <script src="../../assets/js/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/assets/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
    <script src="/Scripts/javascripts/jquery_ui/jquery-ui.js" type="text/javascript"></script>
    <script src="/Scripts/jqGrid/grid.locale-zh_CN.js" type="text/javascript"></script>
    <script src="/Scripts/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/Scripts/webuploader-0.1.5/webuploader.js"></script>

<div id="uploader-demo" class="wu-example">
                                <!--用来存放item-->
                                <div id="fileList3" class="uploader-list"></div>
                                <div id="filePicker3">选择图片</div>
                                <input type="hidden" id="filename3" name="filename3" value="" />
                            </div>

        var uploader3 = WebUploader.create({
            // 自动上传。
            auto: true,
            // swf文件路径
            swf: ‘...’
            // 文件接收服务端。
            server: '...',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker3',
            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

jQuery(function () {

            var $ = jQuery;
            $list3 = $('#fileList3');
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1;
            // 缩略图大小
            thumbnailWidth = 100 * ratio;
            thumbnailHeight = 100 * ratio;

            // 当有文件添加进来的时候
            uploader3.on('fileQueued', function (file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                        '</div>'
                        ),
                    $img = $li.find('img');
                // $list为容器jQuery实例
                $list3.append($li);

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader3.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });
            //上传图片
            uploader3.upload();
            // 文件上传过程中创建进度条实时显示。
            uploader3.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader3.on('uploadSuccess', function (file, json) {
                $('#' + file.id).addClass('upload-state-done');
                $("#filename3").val(json.filePath);
            });

            // 文件上传失败，显示上传出错。
            uploader3.on('uploadError', function (file) {
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                //$error.text('上传失败');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader3.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();
            });

        })

模态框弹出的事件中

            uploader3.addButton({
                id: '#filePicker3',
                innerHTML: '选择图片'
            });

[chjjhc123]

求大神指导啊。。小弟被困扰好久了

[静岩VN]

请问解决了吗？ 今天同样碰到了这个问题。 试了多次，发现了解决办法！ 1）在模态框弹出之前进行webuploader的初始化 uploader = new webuploder.create 2）模态框打开的时候：就是open事件里，添加 uploader.addButton({}) 方法，将picker重新初始化。 然后可以显示出打开窗口了，但是范围是div里面的lable，lable标签之外的div部分是不行的。

[Amanda831022]

同一个问题困扰好久了，昨天终于解决了： 1：在模态窗口弹出之前初始化一遍uploader，这是我在模态窗口父页面的代码 //页面加载后，页面进行渲染 techvalley.afterDocReady(function(){ uploader = WebUploader.create({ swf: techvalley.getRootPath()+"/webuploader/Uploader.swf", server: techvalley.getRootPath()+"/fileUpload", pick: '#picker', resize: false, // fileNumLimit : MAX_FILE_NUM, // fileSizeLimit : MAX_FILE_SIZE, multiple : true, duplicate : true, auto: true }); //------- }); 2：在模态窗口弹出之后再初始化一遍uploader，以下是我在弹出模态窗口后的代码 //点击上传按钮 $('#btn-modal-create').click(function(){ //打开对话框 $modal.modal('show'); $('#modal-create').on('shown.bs.modal', function () { // 当domReady的时候开始初始化 $(function() { uploader = WebUploader.create({ swf : techvalley.getRootPath() + "/webuploader/Uploader.swf", server : techvalley.getRootPath() + "/fileUpload", pick : '#picker', resize : false, // fileNumLimit : MAX_FILE_NUM, // fileSizeLimit : MAX_FILE_SIZE, multiple : true, duplicate : true, auto : true }); }); }) $table.DataTable().draw(); }); 但是目前我的也是每次点击上传按钮，就增大一次，另外进度条之类的还无法显示，正在调试中

[oGrace1]

有个简单的办法可以解决，一开始我是在打开modal的时候，重新addButton绑定下，但结果和楼上一样，每次打开，按钮都会变大 然后只要在modal页面上做个按钮，打开modal时候触发事件，然后调用trigger自动点击触发事件去addButton一次，然后隐藏按钮，就行了，然后只要页面不刷新，打开modal都已经成功绑定了uploader了

[dotnet全栈开发]

jquery绑定事件的错误，有四种绑定事件分方法 这个bootstrap模态框中的文本框各种事件失效是因为绑定事件错误的原因 应该这样绑定： $("body").delegate("#bootstrap", "keydown", function (event) { alert(event.keyCode); } );

[风行傲天]

这么使用，在判断modal时间上添加 $('#modal').on('shown.bs.modal', function () { }); 如: $('#editZoneWin').on('shown.bs.modal', function () { // 当domReady的时候开始初始化 uploader = WebUploader.create({ swf : ossStatic + '/assets/global/plugins/webuploader-0.1.5/Uploader.swf', // 文件接收服务端。 server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); })

[mryonglee]

关闭的时候清楚事件 $('#addModal').on('hide.bs.modal', function () { uploader.destroy(); });

[herbcs]

对于bootstrap的Modal可以这样做：

    $(function () {
        var _$modal = $('#MyModal');
        _$modal.css('display', 'block');
        _$modal.addClass("webuploader-element-invisible");

        var uploader = WebUploader.create(...);

        _$modal.on('show.bs.modal', function () {
            _$modal.removeClass("webuploader-element-invisible");
        });
    });

[yangguosheng]

引用 8 楼 herbcs 的回复:

对于bootstrap的Modal可以这样做：

    $(function () {
        var _$modal = $('#MyModal');
        _$modal.css('display', 'block');
        _$modal.addClass("webuploader-element-invisible");

        var uploader = WebUploader.create(...);

        _$modal.on('show.bs.modal', function () {
            _$modal.removeClass("webuploader-element-invisible");
        });
    });

关键代码是这一句_$modal.css('display', 'block');页面默认显示display:none。需要手动修改。

[Don_mingo]

楼主，怎么解决呢，同样遇到了问题

[weixin_40920229]

16年的帖子，最近才遇到这情况不过还是说一下我怎么解决的， 上面回复的方法好多都是会使按钮越来越大，我看了一下绑定之后的html，发现绑定后就是在按钮里再套一层，并会把按钮加一个class“webuploader-container”， 所以我跟上面一样把按钮初始化事件写在模态框打开事件里，然后在事件的开头加一段 $('.webuploader-container').replaceWith('<a id="filePicker">上传图片</a>'); 先将按钮清除替换成原来的按钮，然后再继续初始化。

[liupq66]

在模态窗弹出后，触发window的resize事件，$(window).trigger('resize'),原因是上传按钮在初始化时监听了window的resize事件，会触发按钮的一个方法，该方法会给按钮重新定位并设置宽高

[四眼土鳖]

F12是对页面重新渲染了导致webUploader重新初始化了,我们可以显示模态框时触发函数调用方法重新初始化webUploader,但是调用create方法是在原先基础上再次初始化导致button不断变大,楼上有解决办法但是有点烦,其实,直接调用uploader.refresh()就可以了,重新初始化,很简单.具体代码如下: $('#modal').on('shown.bs.modal', function () { uploader.refresh(); }) $('#modal')是模态框id选择器,可自定义你的模态框选择器,再绑定'shown.bs.modal'方法,当模态框一显示时就会调用重新初始化webUploader解决问题.

[四眼土鳖]

F12是对页面重新渲染了导致webUploader重新初始化了,我们可以显示模态框时触发函数调用方法重新初始化webUploader,但是调用create方法是在原先基础上再次初始化导致button不断变大,楼上有解决办法但是有点烦,其实,直接调用uploader.refresh()就可以了,重新初始化,很简单.具体代码如下:

$('#modal').on('shown.bs.modal', function () {
    uploader.refresh();
})

$('#modal')是模态框id选择器,可自定义你的模态框选择器,再绑定'shown.bs.modal'方法,当模态框一显示时就会调用重新初始化webUploader解决问题.