javaScript 美化上传文件框

最新推荐文章于 2023-10-18 17:18:29 发布

wangsq-js

最新推荐文章于 2023-10-18 17:18:29 发布

阅读量526

点赞数

分类专栏： javascript 插件文章标签： javaScript 美化上传文件筐

本文链接：https://blog.csdn.net/qq_41617704/article/details/79034722

版权

javascript 插件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

美化上传文件按钮

隐藏原有的按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件框</title>
    <style>
    .file{
        display:inline-block;
        position:relative;
        overflow:hidden;
    }
    .file button{
        border-radius:3px;
        border:1px solid #ccc;
        display:block;
        padding:7px 15px;
        background-color:#fff;
        cursor:pointer;
        outline:none;
    }

    .file input[type="file"]{
        position:absolute;
        top:-999em;
        visibility:hidden;
    }

    </style>
</head>
<body>
    <input type="file">
    <input type="file">
    <script>
        var inps=document.querySelectorAll('input[type="file"]');
        inps.forEach(function(inp){
            var Div=document.createElement('div');
            Div.className='file';
            inp.parentNode.insertBefore(Div,inp)
            var Button=document.createElement('button');
            Button.innerHTML="上传";
            Div.appendChild(Button);
            Button.onclick=function(){
                inp.click();
            }
        })
    </script>
</body>
</html>