【异常】插件WebUploader 上传按钮没反应,按F12才会有反应的问题的解决方案

简介: 插件WebUploader 上传按钮没反应,按F12才会有反应的问题的解决方案

最近做的一个项目用到了WebUploader,但是在多图上传时遇到了一个问题,点击上传按钮没有反应,然后按一下F12就可以正常点击了,然后就开始找解决方法,最终找到一个:

出现问题的原因是插件生成[选择文件]按钮的长度和宽度都是0px,所以鼠标点击不到,才出现了点击上传按钮无效;需要重新渲染一下网页,而F12正好有渲染网页的功能。所以按F12后可以正常点击上传。

解决办法分以下两步:(有的只加上第一步就可以实现修复此BUG)

1)在页面中加一段样式:

<style>#filePickerdiv:nth-child(2){width:100%!important;height:100%!important;}  
</style>

2)如果上传按钮用的不是div 标签,改为div 标签,如 <span id="filePicker">点击上传</span>,改为<div id="filePicker">点击上传</div>



本文首发于CSDN,为博主原创文章,如果需要转载,请注明出处,谢谢!


完结!

目录
打赏
0
0
0
0
17
分享
相关文章
捕获抖音截图:如何用Puppeteer保存页面状态
随着抖音直播的兴起,实时动态和互动元素吸引了大量用户。为了捕获直播页面的实时信息,本文介绍了如何使用 Puppeteer 和代理 IP 服务,解决页面动态加载、反爬虫机制等问题,实现自动化抓取和截图保存。通过安装 Puppeteer、配置代理 IP 和编写简单脚本,可以高效地捕获抖音直播页面的状态。
214 51
纯前端如何实现批量dom转图片,并下载成压缩包
【8月更文挑战第22天】纯前端如何实现批量dom转图片,并下载成压缩包
160 0
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
10月前
|
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
1030 0
layui上传文件弹出请求上传接口出现异常的终极解决方案(v2.68版本、ajax底层逻辑修改、debug快速定位)
layui上传文件弹出请求上传接口出现异常的终极解决方案(v2.68版本、ajax底层逻辑修改、debug快速定位)
1651 0
ChatGPT工作提效之layedit上传多附件的解决方案(layedit赋值、layui.js底层修改、追加模式多附件上传)
ChatGPT工作提效之layedit上传多附件的解决方案(layedit赋值、layui.js底层修改、追加模式多附件上传)
392 0
漏刻有时导入数据layUI上传提示“请求上传接口出现异常”的解决方案
漏刻有时导入数据layUI上传提示“请求上传接口出现异常”的解决方案
228 0
小程序图片上传,存储,获取,显示(含源码)
小程序图片上传,存储,获取,显示(含源码)
403 0
油猴脚本,批量采集页面数据复制,数据过长 JS弹出新页面 自定义html代码
油猴脚本,批量采集页面数据复制,数据过长 JS弹出新页面 自定义html代码
607 0
3分钟教你用原生js实现具有进度监听的文件上传预览组件
本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应api来实现用户自定义的需求,比如文件上传,进度监听,自定义样式,读取成功回调等。
396 0