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

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

原生的<input type="file">标签在Firefox下显示是这样的:
input_file_Firefox
而在chrome显示是这样的:
input_file_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>

实现代码

页面显示部分

1
2
3
4
5
<form id='mainForm' action="xxx.action" method="post" name="mainForm">
<input type="button" value="选择文件" onclick="document.mainForm.excel.click()">
<a id="filename">请选择文件</a>
<input type="file" name="excel" id="excel" accept="application/vnd.ms-excel" style="display:none" onChange="changeText(this)">
</form>

js代码处理

1
2
3
4
5
6
7
8
9
10
11
12
function changeText(th){
var filename = document.getElementById("filename");
var exist = th.value.lastIndexOf("\\");
// 火狐浏览器直接可以获取到文件名
if(exist == -1){
filename.textContent = th.value;
}
//chrome可以获取到绝对路径
else{
filename.textContent = th.value.substring(exist + 1);
}
}

注意事项

刚开始考虑如何在选择文件后将文件名显示在按钮后面时,考虑的是使用innerText方法,将读取的文件名塞到<a>标签内。但是发现innerText方法在Firefox下不起作用。在网上查了相关资料后发现innerText方法并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替。具体的区别可以参考文章:被玩坏的innerHTML、innerText、textContent和value属性

hoxis wechat
提供 CSDN 资料免费下载服务,欢迎来撩~
赞赏一杯咖啡
0%