解決在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)文章
javascript 實(shí)現(xiàn) 秒殺,團(tuán)購 倒計(jì)時展示的記錄 分享
這篇文章介紹了javascript 實(shí)現(xiàn) 秒殺,團(tuán)購 倒計(jì)時展示的記錄方法，有需要的朋友可以參考一下2013-07-07
利用jsonp跨域調(diào)用百度js實(shí)現(xiàn)搜索框智能提示
這篇文章主要為大家詳細(xì)介紹了使用jsonp跨域調(diào)用百度js實(shí)現(xiàn)搜索框智能提示，感興趣的小伙伴們可以參考一下2016-08-08
最近在移動端上面看到不同于菊花圖的加載方式，就是這篇文章需要分享的Skeleton Screen，中文稱之為"骨架屏"，下面我們來簡單了解一下吧2019-05-05
在 TypeScript 中，有兩種主要的定義自定義類型的方式，接口和類型，盡管它們在外觀上可能相似，但它們之間有一些關(guān)鍵的區(qū)別，本文就詳細(xì)的介紹一下，感興趣的可以了解下2023-05-05
javascript實(shí)現(xiàn)貪吃蛇游戲（娛樂版）
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)貪吃蛇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript使用類似break機(jī)制中斷forEach循環(huán)的方法
這篇文章主要介紹了JavaScript使用類似break機(jī)制中斷forEach循環(huán)的方法,需要的朋友可以參考下2018-11-11
本篇文章主要介紹了js獲取瀏覽器各種屬性的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
Web系統(tǒng)中，從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁，是LAMP項(xiàng)目中最常用的技術(shù)之一。頁面跳轉(zhuǎn)可能是由于用戶單擊鏈接、按鈕等引發(fā)的，也可能是系統(tǒng)自動產(chǎn)生的。 此處介紹PHP中常用的實(shí)現(xiàn)頁面自動跳轉(zhuǎn)的方法。2015-04-04
本文主要介紹了用move.js庫實(shí)現(xiàn)百葉窗特效的思路與方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家介紹了JavaScript的Proxy對象，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12