自定义 input type="file" 文件上传样式

本文主要介绍如何修改原生的<input type="file">标签的显示效果，自定义实现文件上传的样式。

原生的<input type="file">标签在Firefox下显示是这样的：

而在chrome显示是这样的：

其中的选择文件的按钮和后面文字是一体的，点击后面的文字同样可以进行文件选择，这是原生<input type="file">标签显示的结果。

有些人想自定义显示按钮上的文字（各个浏览器下面显示还不一样，坑啊），或者 自定义 后面显示的文字，又或者不想让用户点击文字就可以上传文件，等等。

自定义样式实现思路

隐藏<input type="file">，自己写一个按钮，加上onclick事件，触发file文件域。
具体做法如下：
1. 页面上放个隐藏的<input type="file">;
2. 然后加上一个文本<a id="filename">请选择文件</a>用于显示文件名和一个按钮input（type=”button”）
3. 点按钮的时候调用<input type="file">的click选择文件
4. 在<input type="file">的onchange事件中把其值显示在文本<a