博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap tab 页切换导致 webuploader 渲染失败。
阅读量:7066 次
发布时间:2019-06-28

本文共 2190 字,大约阅读时间需要 7 分钟。

  hot3.png

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 }});

 

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

你可能感兴趣的文章
Struts2.5使用通配符的方式实现动态方法调用报错
查看>>
【MySQL】replace into 浅析之一
查看>>
HDOJ(HDU) 2519 新生晚会(组合公式)
查看>>
如果你将业务与技术能进行非常好的结合,那么你就是专家了(转)
查看>>
CentOS 7安装配置Apache HTTP Server
查看>>
编码之道:取个好名字很重要(转)
查看>>
金融安全资讯精选 2017年第十四期:十大顶级终端安全提供商报告,Uber承认数据泄露,微软“11月周二补丁日”发布53个漏洞补丁...
查看>>
Building a RESTful Web Service(转)
查看>>
Docker 容器抓包说明
查看>>
【X-Pack解读】阿里云Elasticsearch X-Pack Graph组件功能详解
查看>>
20171110_allow_read_only_corruption参数
查看>>
聊聊HTTPS和SSL/TLS协议
查看>>
Thinkphp学习04
查看>>
Html A标签中 href 和 onclick用法、区别、优先级别
查看>>
Visual Studio 有哪些好用的插件?
查看>>
linux编程获取本机网络相关参数
查看>>
选eMTC还是NB-IoT,不应该再是一个问题
查看>>
精通CSS+DIV网页样式与布局--滤镜的使用
查看>>
计算机基础知识
查看>>
fackbook的Fresco的多种图片加载方法以及解码过程
查看>>