在使用bootstrap模态框中点击webuploader上传组建的时候出现了无法点击的问题,但是在使用F12之后,突然又可以点击了,这个是因为初始化顺序的问题导致两个组件冲突。
1.解决方案:通过监听modal的点击事件然后在进行uploader的初始化。代码如下:
var uploader;
//只是在点击后初始化的时候生成
$("#modal-form").on("shown.bs.modal",function() {
uploader = WebUploader.create({
swf: "../Uploader.swf",
server: 'http://webuploader.duapp.com/server/fileupload.php',
pick: '#picker', // 选择文件的按钮。可选。内部根据当前运行是创建,可能是input元素,也可能是flash.
resize: false,// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
chunked: true, // 是否分片
duplicate: true,//去重, 根据文件名字、文件大小和最后修改时间来生成hash Key.
chunkSize: 52428 * 100, // 分片大小, 5M
/* fileSingleSizeLimit:100*1024,//文件大小限制*/
auto: true,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
}
});
})
2.但是这样也导致了一个问题。就是每一次打开模态框,按钮就会变大的问题。解决方案:
监听模态框关闭,并销毁。
//关闭模态框销毁WebUploader,解决再次打开模态框时按钮越变越大问题
$('#modal-form').on('hide.bs.modal', function () {
$("#responeseText").text("");
uploader.destroy();
});