首页 > 代码库 > Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决
解决
方法一
在上传按钮上监听一个点击事件，如create()，在该函数中重新生成上传按钮
function create(){ uploader.addButton({ id: ‘#filePicker‘, innerHTML: ‘上传‘ });}通过该函数，每次点击上传时重新生成上传按钮，这种方式的弊端是，第一次点击上传按钮总是没反应的，之后再次点击才能弹出文件选择框
方法二
在模态框弹出后再初始化webuploader
var uploader;//在点击弹出模态框的时候再初始化WebUploader，解决点击上传无反应问题$("#myModal").on("shown.bs.modal",function(){ uploader = WebUploader.create({ swf : ‘/web/public/Uploader.swf‘, server : $("#jumicontextPath").val()+‘/common/file/upload‘,// 后台路径 pick : ‘#filePicker‘, // 选择文件的按钮。可选。内部根据当前运行是创建，可能是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‘ } }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on(‘uploadSuccess‘, function (file,response) { var fileUrl = response.data.fileUrl; //TODO $("#responeseText").text("上传成功,文件名："+response.data.fileName); }); // 当文件上传出错时触发 uploader.on(‘uploadError‘, function (file) { $("#responeseText").text("上传失败"); }); //当validate不通过时触发 uploader.on(‘error‘, function (type) { if(type=="F_EXCEED_SIZE"){ alert("文件大小不能超过xxx KB!"); } });});单单这样也会有问题，这样每次弹出模态框之后都加载一个边框，使按钮越来越大，所以需要在关闭模态框后销毁webuploader
//关闭模态框销毁WebUploader，解决再次打开模态框时按钮越变越大问题$(‘#myModal‘).on(‘hide.bs.modal‘, function () { $("#responeseText").text(""); uploader.destroy();});
Bootstrap模态框使用WebUploader点击失效问题解决
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。