遇到了 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 的话就没这个问题,整个按钮都正常。
 
 
 
 

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

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

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

  2. webuploader 百度上传,一个页面多个上传按钮

    需求:列表里每条数据需加文件上传 html: <div> <ul class="SR_wrap_pic"></ul> <button ty ...

  3. webuploader的一个页面多个上传按钮实例

    借鉴一位大佬的demo  附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览  直接上传图片后拿到回传地址给img标签显示图 ...

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

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  5. webuploader 上传文件参数设置

    webUploader 是款很好用的优秀的开源上传组件,由百度公司开发,详细的介绍可参见webUploader 的官方文档: 最近在使用webUploader时,需要添加额外的参数,并在后台获取,参数 ...

  6. CSS自定义文件上传按钮

    今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选 ...

  7. WebUploader上传文件(一)

    写在前面: 文件上传方式很多的,对于大文件的上传,在本次项目中也有涉及,主要是用了分片断点上传大文件.所以就去了解了一下WebUploader,先从简单的上传文件开始吧~ 在代码中写注释,这样看的比较 ...

  8. webuploader 上传文件 生成链接下载文件

    最近 在asp.net MVC 项目 需要实现一个Excel和 图片上传功能.之前有使用过SWFUpload 做过上传图片功能,在本次实现过程中,有人推荐WebUploader 上传组件,因此采用we ...

  9. 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

    (uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...

随机推荐

  1. leetcode系列---Two Sum C#code

    /// <summary> /// 方法一:双循环 /// </summary> /// <param name="array"></pa ...

  2. [Next] Next.js+Nest.js实现GitHub第三方登录

    GitHub OAuth 第三方登录 第三方登录的关键知识点就是 OAuth2.0 . 第三方登录,实质就是 OAuth 授权 . OAuth 是一个开放标准,允许用户让第三方应用访问某一个网站的资源 ...

  3. Java后端开发工作 - 写接口

    我在公司的工作内容是,对于一个BS应用,负责服务器端开发工作,Java语言.与前端开发人员合作,最终提供给前端RESTFUL接口,保证页面正常响应. 经验之谈 一个接口可以理解为一个业务逻辑,一个业务 ...

  4. 使用Bind提供域名解析服务(正向解析)

    小知识: 一般来讲域名比IP地址更加的有含义.也更容易记住,所以通常用户更习惯输入域名来访问网络中的资源,但是计算机主机在互联网中只能通过IP识别对方主机,那么就需要DNS域名解析服务了. DNS域名 ...

  5. 浅谈Spring AOP 面向切面编程 最通俗易懂的画图理解AOP、AOP通知执行顺序~

    简介 我们都知道,Spring 框架作为后端主流框架之一,最有特点的三部分就是IOC控制反转.依赖注入.以及AOP切面.当然AOP作为一个Spring 的重要组成模块,当然IOC是不依赖于Spring ...

  6. [考试反思]1009csp-s模拟测试66:依旧

    依旧是好一场烂一场. 依旧是那么菜. 依旧是难止颓废. 依旧是在此方仰望,幻想? 上面这段中二的东西是为了防止Parisb说我的标题与内容无关而diss我莫名其妙115的语文. 但是菜是的确是菜... ...

  7. 爬虫学习--Day4(小猿圈爬虫开发_2)

    requests模块 - urllib模块 - requests模块 requests模块:python中原生的一款基于网络请求的模块,功能非常强大,简单便捷,效率极高.作用:模拟浏览器发送请求. 如 ...

  8. CentOS 6.4 configure error的解决方法

    资料来源:http://blog.sina.com.cn/s/blog_62426dcf0100f2rz.html 虽然上面的文章是针对centOS 5写的,不过经测试也可用于centOS6.4. 自 ...

  9. Download-学习资源下载

    小白求关爱:链接为本人工作中学习所碰到的,如有不对之处,请及时联系加以改正,后续仍会追加新链接地址并及时更新旧链接地址 Jdk历史版本 https://www.oracle.com/technetwo ...

  10. 语义分割学习之SegNet的C++编译

    Abstract 安装好Segnet并使用Python进行训练和测试之后,考虑项目的应用,需要在C++的工程环境下进行继续开发,所以这里的主要内容是用C++建立工程,使用相应的数据集和权重参数文件进行 ...