解決在Bootstrap模糊框中使用WebUploader的問題
在我畢設(shè)項(xiàng)目中有個需求是在Bootstrap模糊框中顯示W(wǎng)ebUploader的上傳按鈕,效果如下:
我們直接在Bootstrap的模糊框中插入了上傳的組件:
然而實(shí)際效果卻是當(dāng)模糊框出現(xiàn)之后,卻無法點(diǎn)擊到上傳按鈕。
然而在我按F12想要查看控制臺是否出錯后,WebUploader居然可以彈出文件選擇框,而且其他功能也都正常了。
經(jīng)過查閱資料發(fā)現(xiàn):出現(xiàn)Bug的原因是[選擇文件]按鈕的長寬都是0,需要重新渲染一下網(wǎng)頁,而F12正好有渲染網(wǎng)頁的功能,解決方案就是重新渲染或?qū)嵗疷ploader。需要重新實(shí)例化:uploader.refresh()
第一想法就是就是給模糊框的按鈕注冊點(diǎn)擊事件,點(diǎn)擊彈出模糊框的時候進(jìn)行uploader.refresh()
;然而我在我進(jìn)行修改之后貌似有其他BUG。
最后的解決辦法就是監(jiān)聽模糊框觸發(fā)顯示的事件,然后刷新組件:
$('#updateModal').on('shown.bs.modal',function() {//提示框顯示時候觸發(fā) uploader.refresh(); //刷新當(dāng)前webUploder });
總結(jié)
以上所述是小編給大家介紹的解決在Bootstrap模糊框中使用WebUploader的問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實(shí)用技巧小結(jié)(屏蔽錯誤、div滾動條設(shè)置、背景圖片位置等)
這篇文章主要介紹了JS實(shí)用技巧,包括常見的js屏蔽錯誤、div滾動條設(shè)置以及背景圖片位置等,代碼簡潔易懂,非常實(shí)用,需要的朋友可以參考下2016-06-06詳解基于Vue cli生成的Vue項(xiàng)目的webpack4升級
這篇文章主要介紹了詳解基于Vue cli生成的Vue項(xiàng)目的webpack4升級,本文將詳細(xì)介紹從webpack3到webpack4的升級過程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06javascript實(shí)現(xiàn)文字跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文字跑馬燈效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06JS實(shí)現(xiàn)部分HTML固定頁面頂部隨屏滾動效果
這篇文章主要介紹了JS實(shí)現(xiàn)部分HTML固定頁面頂部隨屏滾動效果,涉及JavaScript響應(yīng)onscroll事件動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12JavaScript二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動菜單
這篇文章主要介紹了使用二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動菜單,通過二維數(shù)組存儲城市列表項(xiàng),需要的朋友可以參考下2014-05-05