【前端 · 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，得到平常乾貨推送。最後再次感謝您的閱讀，我是程序猿憨憨