网页上很多时候会用到上传控件，但是默认的样式不但很丑，而且每个浏览器的样式还不统一（如下图）。而直接对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网站或许会用得到~
太麻烦，而且很多时候，人们过于追求视觉享受的时候
往往也增加了太多代码和图片，网页也拖的越来越墨迹
只能找这两者之间的平衡
实际上第一种那个“文本框”是个假的
不错啊。这次是真学习。
不错,值得收藏