采用js和jQuery修改type="file"的样式
采用<input type="file">的默认样式在不同浏览器的是有所区别的，如： 谷歌浏览器的样式： IE浏览器的样式： 有什么方法修改默认的样式使它在不同浏览器的样式显示效果是一样的呢？上网找到的答案都是没有从本质上修改该样式的方法，那么自己写一个代替它呗！采用js和jQuery来修改（如果有大佬直接用css实现出来不妨分享出来让我膜拜一下，现在我还是有点菜）。自己写的样式那么在不同的浏览器的显示效果肯定是一样的。采用谷歌浏览器相似的效果作为目标。
代码实现
<!DOCTYPE html>
<html>
<head>
<title>file样式修改</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script> <!--必要的-->
<style type="text/css">
html,body{ width: 100%; margin: 0; padding: 0;}
</style>
</head>
<body>
<div>
<!--因为样式是我们自己写的，所以将默认的样式不显示-->
<input type="file" name="file" id="file" style="display: none;">
<div>
<img style="vertical-align: middle; cursor: pointer;" src="添加文件icon.png" onclick="document.getElementById('file').click()">
<span id="filename" style="cursor: pointer;" onclick="document.getElementById('file').click()">未选择任何文件</span>
</div>
</div>
<script type="text/javascript">
// 监听文件选择输入，选择文件后会自动触发change()方法
$('#file').change(function(){
// 获取选择文件输入的路径value
var filePath = $(this).val();
if(filePath == ''){
alert('你还没选择文件！');
$('#filename').html('未选择任何文件'); // 未选择文件
return ;
}
var arr = filePath.split("\\"); // 将路径以‘\’进行分割
var fileName = arr[arr.length-1]; // 最后一个数组元素即为文件名+后缀
$('#filename').html(fileName); // 选中了文件，显示文件名
})
</script>
</body>
</html>
效果
完成了样式修改后就可以在不同浏览器显示同一效果了
