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

这篇文章主要介绍了在bootstrap模糊框中使用webuploader的问题及解决方法,,需要的朋友可以参考下

在我毕设项目中有个需求是在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 });

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

ajax同步验证单号是否存在的方法

ajax同步验证单号是否存在的方法

ajax同步验证单号是否存在的方法

以上就是解决在Bootstrap模糊框中使用WebUploader的问题的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2755982.html

(0)
上一篇 2025年3月8日 07:22:55
下一篇 2025年3月8日 07:23:01

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • webpack4.0打包优化策略整理小结

    这篇文章主要介绍了webpack4.0打包优化策略整理小结,现在分享给大家,也给大家做个参考。 本文介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资料 当前依赖包的版本   1.优…

    2025年3月8日 编程技术
    200
  • 应该如何搭建webpack+react开发环境

    这次给大家带来应该如何搭建webpack+react开发环境,搭建webpack+react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下。 环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 web…

    编程技术 2025年3月8日
    200
  • 如何使用Bootstrap table中toolbar新增条件查询

    这次给大家带来如何使用Bootstrap table中toolbar新增条件查询,使用Bootstrap table中toolbar新增条件查询的注意事项有哪些,下面就是实战案例,一起来看一下。 【相关视频推荐:Bootstrap教程】 /…

    2025年3月8日
    200
  • 怎样实现webpack4 css打包压缩

    这次给大家带来怎样实现webpack4 css打包压缩,实现webpack4 css打包压缩的注意事项有哪些,下面就是实战案例,一起来看一下。 // webpack.config.jsmodule.exports = { // webpac…

    编程技术 2025年3月8日
    200
  • webpack-dev-server配置与使用步奏详解

    这次给大家带来webpack-dev-server配置与使用步奏详解,webpack-dev-server配置与使用的注意事项有哪些,下面就是实战案例,一起来看一下。 1安装的WebPack-dev-server 在终端输入 npm i w…

    编程技术 2025年3月8日
    200
  • 怎样利用webpack搭建react开发环境

    这次给大家带来怎样利用webpack搭建react开发环境,利用webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下。 1.初始化项目 mkdir react-redux && cd reac…

    编程技术 2025年3月8日
    200
  • 怎样使用WebPack配置vue多页面

    这次给大家带来怎样使用WebPack配置vue多页面,使用WebPack配置vue多页面的注意事项有哪些,下面就是实战案例,一起来看一下。 WebPack虐我千百遍,我带她如初恋。一个项目前台页面写差不多了,webpack几乎零配置,也算w…

    编程技术 2025年3月8日
    200
  • nodejs实现的简单web服务器功能示例

    这篇文章主要介绍了nodejs实现的简单web服务器功能,结合实例形式分析了nodejs构建web服务器的相关监听、响应、数据处理等操作技巧,需要的朋友可以参考下 本文实例讲述了nodejs实现的简单web服务器功能。分享给大家供大家参考,…

    编程技术 2025年3月8日
    200
  • Bootstrap 中data-[*] 属性的整理

    本文给大家收藏整理了关于bootstrap 中data-[*] 属性的相关知识,感兴趣的朋友一起看看吧 【1 data-属性】 data属性是HTML5的新属性。允许开发者自由为其标签添加属性.存储数据,这种自定义属性一般用“data-”开…

    编程技术 2025年3月8日
    200
  • webpack打包js的方法

    这篇文章主要介绍了webpack打包js的方法,现在分享给大家,也给大家做个参考。 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 在代码实践之前,先说一写…

    2025年3月8日
    200

发表回复

登录后才能评论