webuploader在bootstrap模态对话框中选择文件按钮无效的问题

搜了很多，网上主要的说法是

当一个元素是hidden时，addbutton绑定是会失败的，所以单击选择文件按钮就无效了

而bootstrap模态框一开始是隐藏的，因此必须在其显示完毕后才可以初始化webuploader

http://www.cnblogs.com/guohu/p/6483043.html

可参考上述帖子内容解决

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，解决再次打开模态框时按钮越变越大问题 $('#myModal').on('hide.bs.modal', function () {$("#responeseText").text("");uploader.destroy(); });


但是我使用上面的办法仍然无效 后来参考了这里http://www.jzdlink.com/studynotes/201703161247.html 我用的上传文件的元素是超链接，改成div后问题解决

总结

以上是生活随笔为你收集整理的webuploader在bootstrap模态对话框中选择文件按钮无效的问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。