解决在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 设计模式之组合模式解析
Apr 09 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
vue项目前端知识点整理【收藏】
May 13 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
JS删除对象中某一属性案例详解
Sep 08 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中常用编辑器推荐
2007/01/02 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python制作数据导入导出工具
2015/07/31 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
python selenium操作cookie的实现
2020/03/18 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
教师求职推荐信范文
2013/11/20 职场文书
2014年督导工作总结
2014/11/19 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
公司搬迁通知
2015/04/20 职场文书
教师考核鉴定意见
2015/06/05 职场文书
欠款证明
2015/06/24 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript