Chrome正常

FireFox显示不正常

上传控件一直有个问题,就是样式问题,解决方法就是用一个大的背景层挡住,然后点大的背景层去触发上传控件的Click事件.

Html:

<span id="uploadImg3">

  <div class="uploadImg-bg3"></div> //大的背景层遮挡

    <h3 class="btncard3">请上头像图片</h3>
<h4 class="btncard-tips3">(尺寸150*150,大小120K以内)</h4>
<input type="file" id="fileccc3" size="1">
</span>

Css:
#uploadImg {
width:485px;
height:240px;
border-radius: 5px;
background: #fff;
display: block;
margin:0 auto;
position: relative;
z-index: 9;
margin-top:20px; }
#fileccc{ width:485px;
height:240px;position: absolute;left:0;top:0;background: #fff;
z-index: -1;} .uploadImg-bg{width:485px;
height:240px;position: absolute;left:0;top:0;
z-index: 10;background:#fff url("../image/index01/website.png") no-repeat;
background-position: center 40%;}
.btncard{color:#f28244;border:none;background: transparent;position: absolute;z-index: 12;font-size: 20px;width:120px;height:22px;
left:50%;margin-left:-60px;top:50%;}
.btncard-tips{color:#585858;border:none;background: transparent;position: absolute;z-index: 12;font-size: 14px;width:212px;height:15px;
left:50%;margin-left:-107px;top:65%;}

js:
$(".uploadImg-bg").click(function(){
$("#fileccc").trigger('click');
}); 引展:trigger和triggerHandler的区别

triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。

triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。

与 trigger() 方法相比的不同之处 
它不会引起事件(比如表单提交)的默认行为 
.trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。 
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。 
该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程序被触发,则这个方法返回 undefined。

简言之:triggerHandler是触发事件上绑定的方法。而trigger除了触发事件上绑定的方法外,还触发浏览器产生的默认事件。

或者这篇文章:

http://www.jb51.net/article/49164.htm

FireFox下上传控件的显示问题的更多相关文章

  1. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

  2. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  3. jquery文件上传控件 Uploadify 可以和ajax交互

    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  4. jquery文件上传控件 Uploadify(转)

    原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...

  5. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

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

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

  7. Extjs3 + swfUpload实现多文件上传控件

    要在ExrtJS框架实现选择多文件上传,FileUploadField已经无法满足需求,所以采用了 swfUpload上传控件,上传窗口如下: 多选文件进行上传(其实是每个文件异步上传),可以中途停止 ...

  8. jquery文件上传控件 Uploadify 问题记录

    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...

  9. 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法

    今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...

随机推荐

  1. beta版本贡献率

    队名:攻城小分队 031302410 郭怡锋 : 占比:50% 031302411 洪大钊: 占比:30% 031302206 陈振贵: 占比:10% 031302416 黄伟祥: 占比:10%

  2. 在Windows和UNIX下利用PHP和LDAP进行身份验证

    我现在的老板曾要求我为企业内部的Web服务提供一种标准的身份验证方法.我遇到的一个主要问题就是我们公司主要使用了两种平台:UNIX和.所以,我的第一个想法并不很成功:它要求每个员工都使用UNIX或者L ...

  3. Java-编写一个jdbc操作类

    1.通过读取文件配置 package 数据库操作类; /* * Db.java Created on 2007年8月20日, 上午 8:37 */ import java.io.*; import j ...

  4. struts2中把action中的值传递到jsp页面的例子

    例子: RegistAction的代码: package com.wss.action; import javax.servlet.http.HttpServletRequest; import or ...

  5. CSS3媒体查询

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  6. GMM算法k-means算法的比较

    1.EM算法 GMM算法是EM算法族的一个具体例子. EM算法解决的问题是:要对数据进行聚类,假定数据服从杂合的几个概率分布,分布的具体参数未知,涉及到的随机变量有两组,其中一组可观测另一组不可观测. ...

  7. IOS基础之 (十五)知识点

    一 SEL 1. 方法的存储位置 每个类的方法地址列表都存储在类对象中. 每个方法都有一个与之对应的SEL类型的对象. 根据一个SEL对象就可以找到方法的地址,进而调用方法. Person.h #im ...

  8. POJ3020Antenna Placement(最小路径覆盖+重在构图)

    Antenna Placement Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7788   Accepted: 3880 ...

  9. xampp 安装red扩展出错解决

    Linux Mint + Xampp Error + ‘grep: /opt/lampp/include/php/main/php.h: No Such File Or Directory’ FEBR ...

  10. C++中argc和argv

    C++中argc和argv C/C++中关于main()函数中argc 和argv[]的说明 main(int argc,char *argv[]); argc代表命令行输入参数的个数 argv存储了 ...