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. tomcat 简介

    一,Tomcat简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项 ...

  2. Sping MVC-创建HelloWeb项目(一)

    下面的例子显示怎样使用Spring MVC框架写一个简单的基于Web的应用程序,使用Eclipse IDE作为开发工具,按照下面的步骤使用Spring Web框架来开发一个动态的Web应用 步骤 描述 ...

  3. Java怎么实现多继承的功效

    Java不支持多继承,但是通过一些巧妙的设计来达到和多继承同样的效果  通过接口.内隐类,继承.实现,互相配合,达到多继承的效果  1.Java中一个类不能继承多个具体class.  2.一个类只可继 ...

  4. OpenJudge 7624 山区建小学

    在openjudge似乎无法凭题号搜到题...? 总时间限制:  1000ms  内存限制:  65536kB 描述 政府在某山区修建了一条道路,恰好穿越总共m个村庄的每个村庄一次,没有回路或交叉,任 ...

  5. Ecshop /admin/get_password.php Password Recovery Secrect Code Which Can Predict Vulnerability

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Ecshop提供了密码找回功能,但是整个密码找回流程中存在一些设计上的安全隐患 . ...

  6. getchar() 和 scanf("%c")的区别

    getchar()和scanf("%c")的功能都是从STDIN读一个字符,单论功能两者没有区别. 但两者的返回值是有区别的: -------------------------- ...

  7. eclipse中建python项目并运行

    1. Help → Install New Software 2.Enter http://pydev.org/updates 3.点击Click "Next" and " ...

  8. Android应用目录结构分析

    一.手动创建android项目 手动创建一个Android项目,命名为HelloWorld,命令如下: android create project -n HelloWorld -t 1 -p E:/ ...

  9. 详细解读MySQL中的权限

    一.前言 很多文章中会说,数据库的权限按最小权限为原则,这句话本身没有错,但是却是一句空话.因为最小权限,这个东西太抽象,很多时候你并弄不清楚具体他需要哪 些权限. 现在很多mysql用着root账户 ...

  10. The C Programming Language (second edition) 实践代码(置于此以作备份)

    1. #include <stdio.h> #include <stdlib.h> #include <math.h> #include<time.h> ...