`
征途2010
  • 浏览: 248068 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

不同浏览器input file样式不一样

阅读更多

在开发项目过程中会碰到不同浏览器input file样式不一样。

经过分析,打算都用IE上面的附件上传样式,



 方案如下:

1、在IE下截个如上面的上传按钮,并保存。

2、判断浏览器类型,如果是非IE,则将页面上的input 设置为近乎透明,然后将图片放在上面。

 

不用修改原有代码,渲染时会扫描页面的input file 然后进行样式覆盖。

 

代码如下

css:

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	width: 208px;
	position: relative;
	text-align: right;
	-moz-opacity: 0;
	filter: alpha(opacity :     0);
	opacity: 0;
	z-index: 2;
}

 js代码:

/**
 * 附件上传样式自定义,解决不同浏览器附件上传框样式不一样问题
 */
function initFileUploads() {
	if($.browser&&$.browser.msie) return;
	$("input[type=file]").each(function(){
		if($(this).parent().attr("class")!='fileinputs') return;
		$(this).attr("class","file");
		var obj=$("<div class='fakefile'><input ct='file'/><img style='padding-bottom:4px;' src='common/image/upload.png'><div>");
		$(this).after(obj);
		$(this).parent().find("input[ct=file]").width($(this).width()-65);
		$(this).on("change",function(){
			$(($(this).parent().find("input"))[1]).val($(this).val());
		})
	});
}
$(document).ready(function(){
	initFileUploads();
})

 

  • 大小: 522 Bytes
分享到:
评论

相关推荐

    input file上传文件样式支持html5的浏览器解决方案

    一个是file上传控件在火狐下无法通过css改变width,另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是file上传控件在IE10,firefox16,chrome22,opera12,safari5.1.7里的截图:  在IE10里,双击...

    文件上传input file简便美化方案(css)

    文件上传input在各个浏览器里表现形式都不一样: ie6   ie7,8,9 ff chrome 这里介绍一种简单实用的,在各种浏览器下表现一致的美化方法,效果如下: ie6无法美化,只能应用部分效果,如下: 选择文件后(以ff...

    type=file的inpu美化,自定义上传按钮样式代码

    用input本身的属性做的上传按钮,在不同的浏览器中长得都不一样。如下图的几个: 但是对input设置的样式只能加在输入框上,对上传按钮根本不起作用。那么有一个超级简单的方法,就是先用一个div制作你要的上传按钮...

    Firefox下input button内文字不能垂直居中的解决方法

    原因是Firefox浏览器为input元素引入了一个私有属性,导致默认的样式表现与大多数其他浏览器不一样。 具体来说,问题主要有两个方面:第一,按钮左右有2像素的间距,这通常是由于Firefox浏览器的私有属性设置了一个...

    jQuery.NiceFileInput.js:jQuery插件,使文件输入CSS样式简单易行

    )是一项耗时的任务,在不同的浏览器上其结果并不相同。 NiceFileInput使事情变得容易,并在3个不同HTML元素(文本输入,按钮和div容器)上转换了文件输入,您可以使用CSS对其进行样式设置,就像平常一样。 ...

    web本地视频播放器源码

    4,用input type=“file” 获取文件地址。可以上传多个视频,或文件夹,(过滤非MP4) 5,实现全屏,及全屏修改自定义控制栏样式 6,由于浏览器全屏时不能获取有关节点,则监听窗口变化并判断是否全屏来确定是否...

    FF(火狐浏览器)下解决按钮的水平居中

    这里,`text-align: center`用于实现按钮内的文字水平居中,而`display: inline-block`则允许我们像对待块级元素一样设置按钮的宽度和居中对齐,同时保持其内联特性,不占用额外行高。如果需要,还可以结合`vertical...

    使用FileReader API创建Vue文件阅读器组件

    在不同的浏览器中,input标签的渲染效果是不一样的。如果我们想要一个相同的渲染效果,就需要有一个自定义的样式。 我们可以将input隐藏,并使用label替代他。要隐藏input,可以使用opacity:0或使用display:block,...

    使用HTML5和CSS3构建基于webkit的Web-PageApp.doc

    2. **表单增强**: `&lt;input type="file"&gt;`用于文件上传,但在某些设备(如iPhone)上可能有特定限制。此外,还有其他新的表单元素,如`&lt;input type="date"&gt;`, `&lt;input type="range"&gt;`等。 3. **链接调用**: `...

    html入门到放弃笔记

    作用:设置同一行文字内的不同样式 9、行内元素 与 块级元素 按照元素们的表现形式来分类,分为 行内元素 和 块级元素1、行内元素 在一行内允许显示多个元素的,称为 "行内元素" span,i,b,s,u,sup,sub 作用:...

    fckedit编辑器

    最后注意不同的版本 变量名称可能不一样请参考你使用的API文档 配置选项: AutoDetectLanguage=true/false 自动检测语言 BaseHref="" 相对链接的基地址 ContentLangDirection="ltr/rtl" 默认文字方向 ...

    extjs4 文件上传

    同步上传会阻塞浏览器直到所有文件上传完成,而异步上传则允许在后台进行,不影响用户的其他操作。通常推荐使用异步上传,因为它提供了更好的用户体验。 6. **表单提交**:EXTJS的文件上传通常与表单结合,通过`...

    Win8.1配置web服务器.docx

    1. HTML特性:某些特性可能在特定设备上不支持,例如`&lt;input type="file"&gt;`在iPhone上可能无法正常工作;`&lt;a href="tel:13888888888"&gt;Call Me&lt;/a&gt;`可以调用拨号应用。 2. WebApp/Web Page设置:可以通过`...

    fckeditor与jsp

    在Web开发中,富文本编辑器(Rich Text Editor)是不可或缺的一部分,它允许用户在网页上编辑内容,就像在Word文档中一样。FCKeditor是一款开源的JavaScript富文本编辑器,而JSP(JavaServer Pages)则是Java平台上...

    jQuery详细教程

    ='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素...

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    CSS大家很熟悉了,全称是Cascading Style Sheets(层叠样式表),是目前用来在浏览器上显示XML文档的主要方法。 3.Behaviors Behaviors现在还没有成为标准。它是微软的IE浏览器特有的功能,用它可以对XML标识设定...

Global site tag (gtag.js) - Google Analytics