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 ...
随机推荐
- 报课系统APP
031302307黄丰润 031302343张晓燕 #NABCD模型分析 合理分析需求有助于说服客户,所以我们有如下分析 N(need)--客户需要什么 负责人需要将选课信息和选课表格一起发送给所负责 ...
- OC基础--description方法
PS:经过之类重写description方法后,个人感觉有点像C#中的ToString();方法 一.description方法的作用:(输出所有的OC对象都用%@) 1.默认情况下(不重写descr ...
- Spring MVC框架
这个Spring Web MVC 框架提供了模型视图控制器的架构,这种结构能够被用来开发灵活的和松耦合的Web应用程序. 这种MVC模式能够将应用程序分离成不同的层面,(输入逻辑,业务逻辑,UI逻辑) ...
- maven_项目的依赖、聚合、继承
一.假设目前有三个maven项目,分别是project.A.project.B.project.C 要求B依赖A.C依赖B但不依赖C 1.B添加对A的依赖 1 2 3 4 5 <depend ...
- NODE学习:利用nodeJS去抓网页的信息
1:引用模块"http" (执行命令node app.js "http://www.baidu.com") //app.jsvar http = require ...
- shiro 与 web 的结合
本次使用的jar包为 shiro-core-.jar shiro-web-.jar 从Shiro 1.2开始引入了Environment/WebEnvironment的概念,即由它们的实现提供相应的S ...
- Java基础-关键字-final
在Java中,final关键字可以用来修饰类.方法和变量(包括成员变量和局部变量).下面就从这三个方面来了解一下final关键字的基本用法. 1.修饰类 当用final修饰一个类时,表明这个类不能被继 ...
- 【poj1050】 To the Max
http://poj.org/problem?id=1050 (题目链接) 题意 求二维最大子矩阵 Solution 数据好像很水,N最大才100,N^4大暴力都可以随便水过. 其实有N^3的做法.枚 ...
- codeforces 719B:Anatoly and Cockroaches
Description Anatoly lives in the university dorm as many other students do. As you know, cockroaches ...
- codeforces 86D : Powerful array
Description An array of positive integers a1, a2, ..., an is given. Let us consider its arbitrary su ...