当前位置: 首页 > 工具软件 > inputfile > 使用案例 >

修改input file的默认样式,js获取input file的文件名,关于修改样式后input file的兼容性问题

胡俊美
2023-12-01

**今天来和大家分享一下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>

 类似资料: