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 = $( '' + ' ' + '' ), $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('不能预览'); 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 }});