修改input file的默认样式，js获取input file的文件名，关于修改样式后input file的兼容性问题
胡俊美
**今天来和大家分享一下input type="file"的默认样式修改相关问题**
首先<input type="file">文件默认条件下在各大浏览器的样式是不一样的，而且很丑，相信很多做前端开发的朋友都需要修改一下它的默认样子。因此我在这用两种方式解决以下问题：
1.隐藏input，用label代替input标签显示在页面上，代码如下：
<style type="text/css">
input[type="file"] {
display: none;
}
label{
display: inline-block;
height: 30px;
line-height: 30px;
width: 50px;
text-align: center;
background: #1f64b0;
color: #fff;
cursor: pointer;
}
input[type="text"]{
height: 25px;
width:150px;
position: relative;
top: -1px;
}
p{color: #f00;}
</style>
<div>
<p>只获取文件名</p>
<input type="file" name="" id="files" onchange="uploadFile(this)">
<label for="files">浏览</label><input type="text" name="" id="txtFile">
</div>
<div>
<p>获取文件路劲，但是浏览器会默认用fakepath代替文件的真实路劲</p>
<input type="file" name="" id="file" onchange="document.getElementById('txtFileUrl').value=this.value" >
<label for="file">浏览</label><input type="text" name="" id="txtFileUrl">
</div>
<script type="text/javascript">
function uploadFile(e) {
var name = event.target.files[0].name;//获取上传的文件名
$('#txtFile').val(name);
}
</script>
2.，以前我一直是用第一种方法来修改file的默认样式的，没有任何问题
但这次做项目的时候，发现这样写，当浏览器调到“兼容模式”后，上传文件就会跳转到一个空白的页面。所以也就有了等会要介绍的第二种方法了。将<input type="file">的透明度设为0，然后将文本框和按钮定位在file上面，来实现上传文件的功能，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.file {
position:relative;
width:226px;
height:30px;
border:1px #ccc solid;
}
.file input {
font-size:16px;
margin:0;
padding:0;
position:relative;
vertical-align:middle;
outline:none;
}
.file input[type="text"] {
border:3px none;
width:162px;
z-index:4;
font-size: 12px;
padding-left: 10px;
}
.file input[type="button"] {
width:54px;
height:30px;
z-index:2;
background: #1f64b0;
color: #fff;
outline: none;
border: none;
}
.file input[type="file"] {
position:absolute;
right:0px;
height:30px;
opacity:0;
z-index:3;
cursor: pointer;
}
p{color: #f00;}
</style>
<body>
<p>在浏览器的兼容模式下，用label修改的input file上传文件会跳转到空白页面，所以换一种方式来改变样式</p>
<div class="file">
<input type="button" value="浏览" /><input type="text" value="未选择文件" /><input type="file" />
</div>
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload=function(){
var file=document.querySelector(".file input[type='file']");
var text=document.querySelector(".file input[type='text']");
file.addEventListener("change",assign,false);
function assign(){
text.value=file.value;
}
}
</script>
</html>
类似资料：