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

笑到世界都狼狈

已于 2022-11-14 20:04:00 修改

阅读量1.8k

点赞数

分类专栏： js/jq 文章标签：修改input file的默认样式 js获取input file的文件名关于修改样式后input file的兼容性问题

于 2019-04-21 17:35:09 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/89436020

版权

js/jq 专栏收录该内容

55 篇文章 4 订阅

订阅专栏

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

笑到世界都狼狈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
修改input file的默认样式，js获取input file的文件名，关于修改样式后input file的兼容性问题

**今天来和大家分享一下input type="file"的默认样式修改相关问题**首先<input type="file">文件默认条件下在各大浏览器的样式是不一样的，而且很丑，相信很多做前端开发的朋友都需要修改一下它的默认样子。因此我在这用两种方式解决以下问题：1.隐藏input，用label代替input标签显示在页面上，代码如下：<style type="te...
复制链接

扫一扫