自定义文件上传控件样式 兼容 IE6

话说,文件上传控件的样式,就如同下拉框的样式一样,没办法通过 CSS 直接进行控制,虽然不影响正常的网页浏览,但是对于一个设计师的心血来说,不能完全还原,还是比较令人郁闷的,但是,活人总不能叫尿憋死,所以总是有很多方法能够达到我们的目的,例如: Mr.Think 的这篇文章,或者这篇文章。但是第一个不兼容IE6,比较遗憾,虽然我现在在自己的项目上坚决不支持IE6,但是,解决方法还是要掌握的。

另一个因素就是 Chrome 下的空间样式和 IE 以及 火狐下不同,具体就不举例子了。

最近想到这个问题,所以写出来和大家分享下,也兼容IE6,那就是,用一个层,将 input 空间给包裹起来,然后将控件相对定位,将包裹的层,例如 a 绝对定位到控件之上,并且给其样式,可以使用 span 或者 a 元素,由你喜欢,但是为了兼顾 IE6 ,还是用 a 比较好,因为 a 可以在 IE6 下产生 手型 的鼠标样式。所以这里就拿 a 来举例,span 或者其他的,就自己发挥吧。

先看图。

那么接下来,就看代码了。

先是结构

1
2
3
4
5
	<input type="text" id="a" readonly="readonly" />
	<a href="javascript:void(0);" class="input">
		浏览
		<input type="file" id="file">
	</a>

此处第一个 input 为模仿 文件路径的输入框,使用 javascript 在选择完成之后,把文件路径填到此处。第二个 a 标签模仿控件,第三个 input 是实际起作用的控件,只不过隐藏了而已。

然后是 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
a.input {
	width:100px;
	height:25px;
	line-height:25px;
	background:#08f;
	text-align:center;
	display:inline-block;/*具有行内元素的视觉,块级元素的属性 宽高*/
	overflow:hidden;/*去掉的话,输入框也可以点击*/
	position:relative;/*相对定位,为 #file 的绝对定位准备*/
}
a.input:hover {
	background:#f80;
}
a{
	text-decoration:none;
	color:#FFF;
}
#file {
	opacity:0;/*设置此控件透明度为零,即完全透明*/
	filter:alpha(opacity=0);/*设置此控件透明度为零,即完全透明针对IE*/
	font-size:100px;
	position:absolute;/*绝对定位,相对于 .input */
	top:0;
	right:0;
}

然后是 javascript 代码,此处给了 原生的 javascript 和 jQuery 方式。

原生 javascript

1
2
3
4
5
6
7
8
<script type="text/javascript">
	var input1 = document.getElementById("file");// 获得控件对象
	input1.onchange = inputPath; //当控件对象 input1 有变化时执行函数 inputPath
	function inputPath() {
		var input2 = document.getElementById("a"); // 获取 input 对象 input2
		input2.value=input1.value;  // 将控件 input1 的值赋给 input2 
	}
</script>

jQuery 方式

1
2
3
4
5
6
7
<script type="text/javascript">
$(function(){
	$("#file").change(function(){  // 当 id 为 file 的对象发生变化时
	        $("#a").val($("#file").val());  //将 #file 的值赋给 #a 
	})
})
</script>

OK,打完收工.

对,还有演示呢:

[翻译]300多种可帮你成为WordPress专家的资源(技巧 自定义 Hacks)

技巧 、自定义和 Hacks

以下资源,将会涉及到博客的安装和主题的自定义以及 Hacks。这些资源将会极大地扩展 WP 的功能,甚至超越插件或者小工具的能力。

13 Vital Tips and Hacks to Protect Your WordPress Admin Area (13个保护 WP 管理后台的技巧和 Hacks )– 保护 WP 后台的一些 Hacks 集合。

Hack Together a User Contributed Link Feed with WordPress Comments (利用 WP 评论使用会都来贡献连接) – 通过使用文章评论,教你如何建立用户生成的公共连接。

5 Great WordPress Hacks (5个很棒的 WP Hacks)– 一些 Hacks 合集,包括'将页面发送到 Twitter'和'在博客上显示作者列。

更多...