主机格调

网页上很多时候会用到上传控件,但是默认的样式不但很丑,而且每个浏览器的样式还不统一(如下图)。而直接对input type="file"定义样式很难实现漂亮的外观,因为很多样式都无效,所以就要通过其他方法在保留上传功能的同时,美化上传控件。

上传控件在浏览器里的样子

在网上搜到2个例子,很不错,今天就分享一下。版权不知道归谁所有,因为不知道作者是谁。

先看DEMO,下面是效果图:

美化后的上传控件

具体代码右键都看得见,我就不复制了。只简单讲一下原理。

第一种的原理是文本框和按钮模拟上传控件,真正的上传控件设置成100%透明了,所以看不见,而且定位在模拟的上面。这样用户点击模拟控件时,其实是在点击真正的上传控件。顺便注意2点:1、size属性是设置上传控件的宽度,你可以把数字设置很小,然后点击模拟控件,有的地方是不会有反应的,特别是按钮那边;2、onchange="document.getElementById('file_text').value=this.value"的作用是把原本上传控件上的文件名和具体地址赋值给文本框,这样看起来更真实。当然,如果你跟我一样有洁癖,不喜欢在html上写js,可以写到js文件里。

第二种的原理更简单,直接用一个div把上传控件包住,固定大小和上传图标一样就OK了。

以上两种方法兼容IE6/7/8、Chrome、Firefox、Opera、Safari。当然,并非完美,因为上传控件不好控制高度。例如第二种方法,如果上传按钮很高,那么图标的每一个区域在某些浏览器里并非点击都有效,特别是按钮下方,所以测试后自己取舍吧。

20140823更新:发现很多网友搜索这个方法,把后来知道也用过的一个方法也补上,希望对各位有帮助。已经更新了DEMO

第三种的原理比较简单,就是用CSS把上传控件隐藏起来,用jQuery来控制点击美化按钮,间接让上传控件执行点击操作,从而激活上传操作。这里需要注意的是,我一开始用的display:none;隐藏上传控件,发现小部分浏览器不兼容,后来换成了绝对定位到网页外边,加上透明,当时测试都兼容了。现在没Windows电脑来测试,大家帮我测试下吧。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/384.html