FireFox下上传控件的显示问题
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下上传控件的显示问题的更多相关文章
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- jquery文件上传控件 Uploadify 可以和ajax交互
http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- jquery文件上传控件 Uploadify(转)
原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- Extjs3 + swfUpload实现多文件上传控件
要在ExrtJS框架实现选择多文件上传,FileUploadField已经无法满足需求,所以采用了 swfUpload上传控件,上传窗口如下: 多选文件进行上传(其实是每个文件异步上传),可以中途停止 ...
- jquery文件上传控件 Uploadify 问题记录
Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...
- 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法
今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...
随机推荐
- ncdu 磁盘目录查看工具
我平时都是直接yum -y install ncdu,但是今天失败了. 所以: 安装EPEL源 CentOS/RHEL 5 : rpm -Uvh https://dl.fedoraproject.or ...
- hdu4081 次小生成树
题意:有n个点,n-1条边.现在徐福可以让一条边无消耗建立,即魔法边.B表示除魔法边之外的的其他边的消耗值和,A表示这条魔法边相连的2个集合中都选一点,这两点的最大值,现在要求A/B最大. 方法:因为 ...
- Java设计模式-组合模式(Composite)
组合模式有时又叫部分-整体模式在处理类似树形结构的问题时比较方便,看看关系图: 直接来看代码: public class TreeNode { private String name; private ...
- java导出txt文本
页面 项目结构 html代码 <html> </head> <body> <form action="down/downLoad" met ...
- 内部类访问局部变量的时候,为什么变量必须加上final修饰
这里的局部变量就是在类方法中的变量,能访问方法中变量的类当然也是局部内部类了.我们都知道,局部变量在所处的函数执行完之后就释放了,但是内部类对象如果还有引用指向的话它是还存在的.例如下面的代码: cl ...
- PHP 7.1 新特性一览
可空类型主要用于参数类型声明和函数返回值声明.主要的两种形式如下:<?phpfunction answer(): ?int { return null; //ok}function ans ...
- UVA116Unidirectional TSP(DP+逆推)
http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18206 题意:M*N的数阵,从左边一列到右边一列走过的数的和的最小.并输出路 ...
- 从系统的gallery获取图片
1 ) 效果演示: 2代码演示 布局代码:
- [Angularjs]视图和路由(二)
写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...
- Redis 下载
https://github.com/MSOpenTech/redis/releases下载 Redis伴侣Redis Desktop Manager:http://redisdesktop.com/ ...