自定义上传组件样式

自定义上传组件样式实现

最新推荐文章于 2025-09-11 04:47:53 发布

原创最新推荐文章于 2025-09-11 04:47:53 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#自定义上传按钮 #上传组件个性化

前端专栏收录该内容

5 篇文章

订阅专栏

由于HTML默认的上传文件组件外观不理想，通常需要进行自定义样式设置。一种常见方法是将上传组件设置为透明并隐藏，然后创建一个具有吸引力的用户界面元素。当用户点击这个自定义元素时，通过模拟点击事件触发隐藏组件的上传功能。这里提供了一个简易的示例代码。

写在最前面

HTML自带的上传文件组件样式较丑陋。通常需要自定义组件样式。思路是把上传组件透明化（隐藏）, 然后再自定义一个酷炫组件,点击酷炫组件的时候去模拟点击事件：模拟点击隐藏的组件

简易demo

这里写图片描述

code

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>

        .fileClassDiv {

            margin: 8px;
            padding: 32px;
            border: 1px solid #3089dc;
            text-align: center;
            font-size: 25px;
            width: 232px;
        }

        .fileClassInput {
            filter: alpha(opacity=0);
            opacity: 0;
            width: 0;
            height: 0;
        }
    </style>
</head>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

    $(function () {
        // + 监听
        $(document).on("click", ".fileClassDiv", function () {
            console.log(this);

            var fileInputElement = $(this).parent().children(".fileClassInput");
            fileInputElement.trigger("click");
        })
    });

    // 上传视频input监听
    $(document).on("change", ".fileClassInput", function () {

        // 视频名字
        var videoDivElement = $(this).parent().children(".fileClassDiv");

        // 视频名字回填div

        videoTip = $(this).val().substring($(this).val().lastIndexOf("\\") + 1);

        videoDivElement.html(videoTip);
    });

</script>

<body id="bodyId">
    <div class="fileClassDiv">+</div>
    <input class="fileClassInput" type="file"/>
</body>
</html>