解决在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 相关文章推荐
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
JavaScript简单编程实例学习
Feb 14 Javascript
js+cavans实现图片滑块验证
Sep 29 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
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JQuery基础语法小结
2015/02/27 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python 多核并行计算的示例代码
2017/11/07 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
简单了解Python生成器是什么
2019/07/02 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
化妆品促销方案
2014/02/24 职场文书
团日活动总结报告
2014/06/25 职场文书
家长学校培训材料
2014/08/20 职场文书
高三数学教学反思
2016/02/18 职场文书
导游词之阆中古城
2019/12/23 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python