本文主要介绍如何修改原生的<input type="file">
标签的显示效果,自定义实现文件上传的样式。
原生的<input type="file">
标签在Firefox下显示是这样的:
而在chrome显示是这样的:
其中的选择文件的按钮和后面文字是一体的,点击后面的文字同样可以进行文件选择,这是原生<input type="file">
标签显示的结果。
有些人想自定义显示按钮上的文字(各个浏览器下面显示还不一样,坑啊),或者 自定义 后面显示的文字,又或者不想让用户点击文字就可以上传文件,等等。
自定义样式实现思路
隐藏<input type="file">
,自己写一个按钮,加上onclick事件,触发file文件域。
具体做法如下:
1. 页面上放个隐藏的<input type="file">
;
2. 然后加上一个文本<a id="filename">请选择