【前端 · input优化】关于 input file 文件控件的优化（一）

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

这是一个关于 input file 文件控件的优化系列，感兴趣的朋友能够关注我。对于文章有任何问题欢迎你们指正、交流。

前言

在平常开发过程当中，页面每每会有表单填写的需求。上传文件、图片等等的是比较常见的场景了。可是原生的选择文件控件的界面确实比较简陋。因此咱们就来优化这个控件。

目标

首先咱们先实现控件的样式，两种控件样式：图片上传样式，文件上传样式

准备 & 初始化环境

1. normalize.css 使用 normalize.css 重置浏览器默认样式，让各个浏览器的表现一致
2. 新建 index.html 文件，引入 normalize.css
3. 引入 Bootstrap 图标库

编写界面

<div class="file-wrapper">
        <ul class="upload-list--picture-card">
            <li class="upload-list__item">
                <img src="https://picsum.photos/id/575/2509/1673" alt="" class="upload-list__item-thumbnail">
            </li>
            <li class="upload-list__item">
                <img src="https://picsum.photos/id/577/2509/1673" alt="" class="upload-list__item-thumbnail">
            </li>
        </ul>
        <div class="upload--picture-card">
            <i class="bi bi-plus-lg"></i>
        </div>
        <input type="file" name="file" class="upload__input" />
    </div>
复制代码

.file-wrapper {
        padding: 30px;
    }
    .upload--picture-card {
        display: inline-block;
        box-sizing: border-box;
        width: 148px;
        height: 148px;
        outline: none;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        background-color: #fbfdff;
        vertical-align: top;
        text-align: center;
        line-height: 146px;
        cursor: pointer;
    }
    .upload--picture-card .bi-plus-lg {
        font-size: 28px;
        color: #8c939d;
    }
    .upload__input {
        display: none;
    }

    .upload-list--picture-card {
        margin: 0;
        display: inline;
        vertical-align: top;
    }
    .upload-list--picture-card .upload-list__item {
        position: relative;
        transition: all .5s cubic-bezier(.55,0,.1,1);
        font-size: 14px;
        color: #606266;
        line-height: 1.8;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 148px;
        height: 148px;
        margin: 0 8px 8px 0;
        display: inline-block;
    }
    .upload-list--picture-card .upload-list__item-thumbnail {
        display: block;
        width: 100%;
        height: 100%;
    }
复制代码

未完待续

最初的界面已经完成，下一集编写另外一种界面样式哈。

（求关注）

欢迎关注个人公众号：A纲 Coder，得到平常干货推送。最后再次感谢您的阅读，我是程序猿憨憨