Bootstrap tab 页切换导致 webuploader 渲染失败。

为什么80%的码农都做不了架构师？>>>   

tab 页切换后, js 会导致之前的 webuploader 渲染失败。正确的做法是：

$('.js_new_article_link[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    imgUpload.advancedUpload(function () {
        layer.msg("图片上传成功");
    });
});

如上。

文件上传相关工具

define(["jquery", "webuploader"], function ($, WebUploader) {

    var multipleUpload = function (el, hiddenFiled, picker, callback) {
        var $list = $("" + el);
        var baseUrl = /https?:\/\/[^\/]+/.exec(location.href)[0];

        var uploader = WebUploader.create({
            auto: true,
            server: baseUrl + '/file/upload',
            pick: {
                id: '' + picker,
                multiple: false
            },
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            resize: true,
            method: "POST",
            formData: {
                bucket: $list.data('bucket')
            }
        });

        uploader.on('fileQueued', function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img alt="">' +
                '</div>'
                ),
                $img = $li.find('img');
            $list.find('img').remove();
            var loadComponent = $list.find('.fileupload-component');
            loadComponent.before($li);

            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 1, 1);
        });

        uploader.on('uploadSuccess', function (file, res) {
            uploader.removeFile(file,true);
            $('' + hiddenFiled).val(res.data.objectName);
            if (callback != null) {
                callback(uploader, file, res);
            }
        });

        uploader.on('uploadError', function (file) {
            alert("failed 2")
        });
    };

    var advancedUpload = function (callback) {
        multipleUpload("#fileList", '.js_upload_field', '#filePicker', callback);
    };

    return {
        advancedUpload: advancedUpload,
        multipleUpload: multipleUpload
    }
});

 

转载于:https://my.oschina.net/lemos/blog/2999555