在开发项目过程中会碰到不同浏览器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(); })
相关推荐
一个是file上传控件在火狐下无法通过css改变width,另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是file上传控件在IE10,firefox16,chrome22,opera12,safari5.1.7里的截图: 在IE10里,双击...
文件上传input在各个浏览器里表现形式都不一样: ie6 ie7,8,9 ff chrome 这里介绍一种简单实用的,在各种浏览器下表现一致的美化方法,效果如下: ie6无法美化,只能应用部分效果,如下: 选择文件后(以ff...
用input本身的属性做的上传按钮,在不同的浏览器中长得都不一样。如下图的几个: 但是对input设置的样式只能加在输入框上,对上传按钮根本不起作用。那么有一个超级简单的方法,就是先用一个div制作你要的上传按钮...
原因是Firefox浏览器为input元素引入了一个私有属性,导致默认的样式表现与大多数其他浏览器不一样。 具体来说,问题主要有两个方面:第一,按钮左右有2像素的间距,这通常是由于Firefox浏览器的私有属性设置了一个...
)是一项耗时的任务,在不同的浏览器上其结果并不相同。 NiceFileInput使事情变得容易,并在3个不同HTML元素(文本输入,按钮和div容器)上转换了文件输入,您可以使用CSS对其进行样式设置,就像平常一样。 ...
4,用input type=“file” 获取文件地址。可以上传多个视频,或文件夹,(过滤非MP4) 5,实现全屏,及全屏修改自定义控制栏样式 6,由于浏览器全屏时不能获取有关节点,则监听窗口变化并判断是否全屏来确定是否...
这里,`text-align: center`用于实现按钮内的文字水平居中,而`display: inline-block`则允许我们像对待块级元素一样设置按钮的宽度和居中对齐,同时保持其内联特性,不占用额外行高。如果需要,还可以结合`vertical...
在不同的浏览器中,input标签的渲染效果是不一样的。如果我们想要一个相同的渲染效果,就需要有一个自定义的样式。 我们可以将input隐藏,并使用label替代他。要隐藏input,可以使用opacity:0或使用display:block,...
2. **表单增强**: `<input type="file">`用于文件上传,但在某些设备(如iPhone)上可能有特定限制。此外,还有其他新的表单元素,如`<input type="date">`, `<input type="range">`等。 3. **链接调用**: `...
作用:设置同一行文字内的不同样式 9、行内元素 与 块级元素 按照元素们的表现形式来分类,分为 行内元素 和 块级元素1、行内元素 在一行内允许显示多个元素的,称为 "行内元素" span,i,b,s,u,sup,sub 作用:...
最后注意不同的版本 变量名称可能不一样请参考你使用的API文档 配置选项: AutoDetectLanguage=true/false 自动检测语言 BaseHref="" 相对链接的基地址 ContentLangDirection="ltr/rtl" 默认文字方向 ...
同步上传会阻塞浏览器直到所有文件上传完成,而异步上传则允许在后台进行,不影响用户的其他操作。通常推荐使用异步上传,因为它提供了更好的用户体验。 6. **表单提交**:EXTJS的文件上传通常与表单结合,通过`...
1. HTML特性:某些特性可能在特定设备上不支持,例如`<input type="file">`在iPhone上可能无法正常工作;`<a href="tel:13888888888">Call Me</a>`可以调用拨号应用。 2. WebApp/Web Page设置:可以通过`...
在Web开发中,富文本编辑器(Rich Text Editor)是不可或缺的一部分,它允许用户在网页上编辑内容,就像在Word文档中一样。FCKeditor是一款开源的JavaScript富文本编辑器,而JSP(JavaServer Pages)则是Java平台上...
='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素...
CSS大家很熟悉了,全称是Cascading Style Sheets(层叠样式表),是目前用来在浏览器上显示XML文档的主要方法。 3.Behaviors Behaviors现在还没有成为标准。它是微软的IE浏览器特有的功能,用它可以对XML标识设定...