生活随笔
收集整理的這篇文章主要介紹了
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模态对话框中选择文件按钮无效的问题的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。