网页上很多时候会用到上传控件,但是默认的样式不但很丑,而且每个浏览器的样式还不统一(如下图)。而直接对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电脑来测试,大家帮我测试下吧。
过来膜拜下
沙发没了,坐板凳。
围观中
今天 第三次 测试…
非技術宅瞭解下就好了。。。
其实就是障眼法……这在web设计里经常使用,呵呵……
博客用不到吧。
chrome。。。。safari。。。要独特些。哈哈
好看,收了。。。
额 看看不说话!!!因为这是技术活
上传按钮的样式很重要哈~~~
我小白的实现方式是把下载链接换成图片链接~~ 😈
我杂就评论不了呢? 😐
挺漂亮的
效果不错。比自带的好多了。
技术控都比较容易让人敬仰
以后设计sns网站或许会用得到~
太麻烦,而且很多时候,人们过于追求视觉享受的时候
往往也增加了太多代码和图片,网页也拖的越来越墨迹
只能找这两者之间的平衡
实际上第一种那个“文本框”是个假的
不错啊。这次是真学习。
不错,值得收藏