解决WebUploader 上传按钮按F12 才行的问题

遇到了 WebUploader 插件的上传按钮点击无效(此时鼠标在按钮任何位置时,按钮都没变化)、按F12 之后才有反应(此时鼠标在按钮任何位置时,按钮颜色都会变深) 的问题,网上查到一些答案,找到了一种测试有效的办法。

首先出现Bug的原因是插件生成[选择文件]按钮的长宽都是0,所以点击不到;需要重新渲染一下网页,而F12正好有渲染网页的功能。

解决办法分以下两步:

1)在页面加一段样式:

<style>

#filePicker div:nth-child(2){width:100%!important;height:100%!important;}

</style>

2)如果上传按钮用的不是div 标签,改为div 标签,如 <span id="filePicker">选择图片</span>,改为<div id="filePicker">选择图片</div>。

如果做了第一步但用的是span 标签的话,只有鼠标在文字下方的按钮区域才有效(有效时,鼠标移上去按钮颜色会变深,无效时按钮没反应),按F12之后,只有鼠标在文字上方的按钮区域点击才有效;

用div 的话就没这个问题,整个按钮都正常。

引用自:http://www.lingyun.net/forum/384.html

原文地址:https://www.cnblogs.com/colyn/p/10956970.html

时间: 2024-10-28 11:31:41

解决WebUploader 上传按钮按F12 才行的问题的相关文章

WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作中遇到的一个问题:公司的后端同事用bootstrap的模态框,结合WebUploadder做后台上传文件的功能的时候,发现上传按钮点击无效.同事过来请求我支援,我研究了下,发现了三种解决方案,下面具体说说是这三种方法是怎么解决的. 我们先来分析一下解决这个问题的思路: 为什么上传控件放到模态框里面就

Chrome浏览器点击 input file上传按钮时延迟3-5秒的解决方法

1.  Google chrome 浏览器在52版本之后出现一个bug,就是点击 input file上传按钮时反应很慢,需要等待3-5秒种之后才能弹出选择文件的对话框.比如 windows里可能是这样: MAC里可能是这样:

webuploader上传ie9,ie8上传多个文件时上传失败 F12报错 缺少对象

报错原因:1.将webupload的上传按钮 进行了隐藏 例如 设置了 display:none;属性,2.或是在vue项目中 当前按钮元素或父级元素上 用了 v-show,v-if ,总结:在这种情况下 flash 会停止运行,请改用以下方式隐藏:给需要隐藏的元素,加类名代替display:none 属性.(例如:添加类名:.hiddenBtn,添加css{ width:0px; height:0px; overflow:hidden;})这里css可以用其他方式,position隐藏都可以

用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的方法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个小巧的玩意,jQuery File Upload. 本文包含了upload的js实现,html的分析,css的实现等内容,文章末尾有git地址 最简运行时 官网下载的demo有N多

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧!

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧! 图片上传是非常常见的功能,而多图上传在大多数应用中也是非常常见的,比如微信的朋友圈,微博的动态,都是有九宫格图片的,那这里肯定涉及了多图上传,所以今天我们来一起撸一下,怎么去思考这个实现逻辑! 这里我想到的思路是比较简单的,首先,我们有一个按钮,按钮是上传图片,点击之后弹出某个界面进行图片的选择,一般是九张图片或者十二张,选完之后就直接上传了,大致的流程应该是这个样子,那我们首先来写个按钮 activity_main.xml <?

CSS自定义文件上传按钮

原文:CSS自定义文件上传按钮 今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选择文件的样式死活调不出来,于是我就同他一块解决,后来经过自己设置width,height折腾无果,再求助google终于找到了解决办法,这个方法是这样的: 用一个标签套着文件域,然后调整文件域外边的元素,设置成按钮样式,然后,在把文件域"隐藏"掉(这里的隐藏

ExtJs4学习(十三)如何给文件上传按钮加背景图片

我们日常看到的上传按钮都是这样的 当然browse是默认的,我们可以去改变它,比如替换成"上传",配置为buttonText: '上传', 如果我们想给按钮添加背景图片呢,你可能注意到了这个配置 buttonConfig { xtype: 'filefield', emptyText: 'Select an image', fieldLabel: 'Photo', name: 'photo-path', buttonText: '', buttonConfig: { iconCls:

Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮--推荐使用

今天帮朋友解决  Plupload  上传的问题,查了很多资料,资料还是挺全的,但是有点零零散散的,故整理好,合并发出来. 本教程包括: Plupload  上传详细讲. Plupload  多实例上传. Plupload  多个上传按钮. Plupload  上传成功获取返回值. 我们来看一个比较全的  Plupload  Demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

struts2+extjs文件上传完整实现(解决了上传中的各种问题)

首先需要引入上传控件 <script type="text/javascript" src="<%=basePath%>/js/ext/examples/ux/fileuploadfield/FileUploadField.js" charset="utf-8"></script> 弹出上传框对应extjs代码 var uploadForm=new Ext.FormPanel({ id:'uploadForm'