webuploader在bootstrap模态对话框中选择文件按钮无效的问题解决方法

参考:https://blog.csdn.net/cckevincyh/article/details/79646679

在百度上的方法试了很多都是改完这个bug出现另一个bug,最后在https://blog.csdn.net/cckevincyh/article/details/79646679这篇文章找到了解决方法,重点是

uploader.refresh();这句,如下:
var $list = $('#fileList'),
    ratio = window.devicePixelRatio || 1,
    thumbnailWidth = 100 * ratio,
    thumbnailHeight = 100 * ratio,
    uploader;
    uploader = WebUploader.create({
        auto: true,
        swf: swfUpload + '/webuploader/Uploader.swf',
        server: 'general.php?m=upload&a=admin&folder=figureppic&formtoken=' + formtoken,
        pick: '#filePicker',
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png'
        }
    });
    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="remove">×</div>' +
                    '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
            $img = $li.find('img');

        //$list.append( $li );
        $list.html( $li );

        // 移除封面图
        $li.on('click', '.remove', function() {
            $(this).parent().remove();
            //uploader.removeFile( file );
        });

        // 创建缩略图
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.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, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file, response ) {
        //$( '#'+file.id ).addClass('upload-state-done');
        uploader.reset(); // 重置队列
        if( response.status == 1 ) {
            $( '#'+file.id ).append( '<input type="hidden" name="pic_id" value="'+ response.id +'">' );
        } else {
            $( '#'+file.id ).remove();
            w_dialog_error( response.msg );
        }
    });

    // 文件上传失败,现实上传出错。
    uploader.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('上传失败');
    });

    // 完成上传完了,成功或者失败,先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
    // 删除封面图
    $('#w-pic-remove').on('click', function() {
        w_dialog_confirm("确认删除吗?", function() {
            $("#pic_delete").val('yes');
            $('#w-pic-remove').parent().remove();
        });
    });
    $("#myModal").on("shown.bs.modal",function(){  
        uploader.refresh();
    });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值