如何在bootstrap的modal中触发选择文件按钮

[cedar0104]

当将插件放置于bootstrap的modal面板中，文件选择的按钮无法触发（当刷新完成后打开控制台，原本无法选择的按钮变的可以选择），请问这是什么原因，如何改进？

[JakHuang]

我遇到类似的问题，有尝试过将代码写在 shown.bs.modal 事件里，但是好像没有完全解决文件选择无法触发的问题（当然，f5刷新后就正常了）。尝试看了下源码，“（当刷新完成后打开控制台，原本无法选择的按钮变的可以选择）” 这个问题似乎与webuploader.js 1775行左右的代码有关，
... refresh: function() { var shimContainer = this.getRuntime().getContainer(), button = this.options.button, width = button.outerWidth ? button.outerWidth() : button.width(),

                height = button.outerHeight ?
                        button.outerHeight() : button.height(),

                pos = button.offset();

            width && height && shimContainer.css({
                bottom: 'auto',
                right: 'auto',
                width: width + 'px',
                height: height + 'px'
            }).offset( pos );
        },

... 这里将原本宽高为1px的选择按钮，刷新成指定大小。但是如果这个的操作失败了（由于js加载顺序或者是控件代码等的原因）那么就选不了文件了。 还在摸索，来这里也是找解决方案的。

[zeuszhao-hub]

我的这段代码片段可以

    var uploader = {};
    uploader.options = {
        swf:"/assets/libs/webuploader/Uploader.swf",
        server:lesson.uploadUrl,
        pick:"#upload-btn",
        innerHTML: '选择文件',
        accept:{
                title: 'Video',
                extensions: 'asf,avi,m2tf,m2v,mp4,mpeg,mpg,mts,ts,wmv,3gp,3g2,3gp2,mod,dv,vob,ismv,m4a'
                //mimeTypes: 'video/*,flv-application/octet-stream'
        },
        auto:true,
        chunked:true,
        chunkSize: 3 * 1024 * 1024,
        chunkRetry:3,
        threads:3,  
        fileVal:"files",
        sendAsBinary:true,
        fileNumLimit:1,
        fileSingleSizeLimit:1024 * 1024 * 1024,
        resize: false,
    };

    uploader.clean = function(file){
        if(file)
            uploader.handle.cancelFile(file);
        uploader.resetTime();
    }

    uploader.resetTime = function(){
        uploader.time = Date.parse(new Date()); 
    }

    uploader.init= function(modal){
        uploader.handle = webupload.create(uploader.options);        

        uploader.resetTime();

        uploader.handle.on('error',function(str){
            if(str == 'Q_TYPE_DENIED'){
                msg.show('不允许上传该格式视频,请重新选择');
            }
            if(str == 'Q_EXCEED_SIZE_LIMIT'){
                msg.show('附件大小超出限制请重新选择');
            }
        })

        uploader.handle.on('beforeFileQueued',function(file){
            uploader.file = file;
            progress.init(); 
        })

        uploader.handle.on('startUpload',function(){
            uploader.handle.option('formData',{act:"upload",'_csrf_token': $('meta[name=csrf-token]').attr('content'),time:uploader.time});
            progress.start();
            $("#l_media").val("{}");
            $("#upload-modal").parents(".modal").find(".btn").addClass("disabled");
            modal.on('hide.ui.modal',function(){
                if(!event.uploading()){
                    return false;
                }
            });

            modal.on('primary.ui.modal', function() {
                msg.show("请等待附件上传完毕后在提交");
            });

            var file = uploader.file;
            var html = '&nbsp;&nbsp;<span style="cursor: pointer;" id="l_'+ file.id +'">重新上传</span>'
            $("#uploaded-file").html(file.name + html);
            $("#l_" + file.id).on("click",function(){
                uploader.clean(file);
                $("#uploaded-file").html('');
                progress.end();
                modal.on('primary.ui.modal', function() {
                    msg.show("请上传附件");
                });
            })
        })

        uploader.handle.on('uploadProgress',function(file,percentage){
            progress.add(percentage);
        });

        uploader.handle.on('fileQueued',function(file){
            uploader.handle.md5File(file).then(function(val){
                uploader.file.md5 = val;
            });            
        })

        uploader.handle.on('uploadSuccess',function(file,response){
            $.post(lesson.uploadUrl,{act:'merge',time:uploader.time,lastModifiedDate:uploader.file.lastModifiedDate,size:uploader.file.size,mime:uploader.file.type,token:uploader.token,md5:uploader.file.md5,name:uploader.file.name},function(data){
                var res = data;
                var media = {};
                media.id = res.id ? res.id : 0;
                media.status = res.convertStatus ? res.convertStatus : 'none';
                media.type = res.type;
                media.source = 'self';
                media.name = res.filename;
                media.length = res.length;
                $("#l_media").val(JSON.stringify(media));

                $("#upload-modal").parents(".modal").find(".btn").removeClass("disabled");

                modal.on('primary.ui.modal', function() {
                    event.submit();
                });
            },'json');   

            modal.on('hide.ui.modal',function(){
                if(!event.uploading()){
                    return false;
                }
            });
        })

    }

    //添加
    $(document).on('click', '.j-add-class,.lesson-edit', function() {
        var url = $(this).attr("data-url");
        lesson.url = url;
        $.get(url,function(data){
            var addClassModal = UI.modal({
                title: "添加",
                content: data,
                primary: '保存',
                dismiss: '取消'
            }).on('show.ui.modal',function(){
                $.ajax({ 
                    url:lesson.tokenUrl,
                    dataType:"json",
                    success:function(data){
                        var tokenSource = data.postParams.token;
                        uploader.token = tokenSource;
                    }
                })
            }).on('shown.ui.modal',function(){
                uploader.init(addClassModal);
                screen.init();
                addClassModal.on('primary.ui.modal', function() {
                    event.submit();
                });

                $("#upload-again1").click(function(){
                    $(this).parents("#progress-box1").remove();
                    $("#upload-btn").show();
                    uploader.init(addClassModal);
                    screen.init();
                })
            }).show().on('hide.ui.modal',function(){
                uploader.clean(uploader.file);
                $("#upload-modal").parents(".modal").remove();
            });

        })
    })

[JakHuang]

页面在加载完后点击按钮无效，按下f12或者刷新后正常。现在的解决方案是：在webuploader.js 1775行左右的refresh方法里，加入以下代码： shimContainer.css({ width: '100%', height: '100%' }); 问题似乎解决了。 楼上的代码，我借鉴试试看