解决在Bootstrap模糊框中使用WebUploader的问题


Posted in Javascript onMarch 22, 2018

在我毕设项目中有个需求是在Bootstrap模糊框中显示WebUploader的上传按钮,效果如下:

解决在Bootstrap模糊框中使用WebUploader的问题

我们直接在Bootstrap的模糊框中插入了上传的组件:

解决在Bootstrap模糊框中使用WebUploader的问题

然而实际效果却是当模糊框出现之后,却无法点击到上传按钮。

然而在我按F12想要查看控制台是否出错后,WebUploader居然可以弹出文件选择框,而且其他功能也都正常了。

经过查阅资料发现:出现Bug的原因是[选择文件]按钮的长宽都是0,需要重新渲染一下网页,而F12正好有渲染网页的功能,解决方案就是重新渲染或实例化Uploader。需要重新实例化:uploader.refresh()

第一想法就是就是给模糊框的按钮注册点击事件,点击弹出模糊框的时候进行uploader.refresh();然而我在我进行修改之后貌似有其他BUG。

最后的解决办法就是监听模糊框触发显示的事件,然后刷新组件:

$('#updateModal').on('shown.bs.modal',function() {//提示框显示时候触发
    uploader.refresh();   //刷新当前webUploder
 });

总结

以上所述是小编给大家介绍的解决在Bootstrap模糊框中使用WebUploader的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
js 处理URL实用技巧
Nov 23 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
原生js实现轮播图
Feb 27 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
JS中的事件委托实例浅析
Mar 22 #Javascript
jquery的 filter()方法使用教程
Mar 22 #jQuery
p5.js实现斐波那契螺旋的示例代码
Mar 22 #Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 #Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 #Javascript
基于vue-video-player自定义播放器的方法
Mar 21 #Javascript
基于iScroll实现内容滚动效果
Mar 21 #Javascript
You might like
PHP4实际应用经验篇(1)
2006/10/09 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
用Python写一个自动木马程序
2019/09/17 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
架构师岗位职责
2013/11/18 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏