【前端 · input優化】關於 input file 文件控件的優化（四）

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰css

這是一個關於 input file 文件控件的優化系列，感興趣的朋友能夠關注我。對於文章有任何問題歡迎你們指正、交流。html

目標

目前文件控件還有缺點，好比：當前只支持單控件上傳，那若是是多控件上傳的話，如今的邏輯確定是不支持的，那麼該怎麼作呢？接下來就帶你們實現多控件上傳。markdown

重構

首先就是重構代碼，把 HTML, CSS, JS 的都重構了。app

1. 優化 HTML

<div class="file-wrapper upload--box" style="width: 100%;">
    <ul class="list-card">
        <li class="list-item">
            <img src="https://picsum.photos/id/575/2509/1673" alt="" class="item--thumbnail">
            <span class='item--actions'>
                <span class='icon-preview'><i class='bi bi-zoom-in'></i></span>
                <span class='icon-download'><i class='bi bi-download'></i></span>
                <span class='icon-trash'><i class='bi bi-trash'></i></span>
            </span>
        </li>
    </ul>
    <div class="upload-add">
        <i class="bi bi-plus-lg"></i>
    </div>
    <input type="file" name="fileCard1" multiple="multiple" class="upload-input" />
</div>

<div class="file-wrapper upload-file--box">
    <div class="upload-add">點擊上傳</div>
    <input type="file" name="file" multiple="multiple" class="upload-input" />
    <div class="upload--tip">只能上傳jpg/png文件，且不超過500kb</div>
    <ul class="list-card">
        <li class="list-item">
            <img src="https://picsum.photos/id/575/2509/1673" alt="" class="item--thumbnail">
            <a class="item--name">food2.jpeg</a>
            <i class="bi bi-x"></i>
        </li>
    </ul>
</div>
複製代碼

2. 優化 CSS

.list-card {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}
.list-card .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;
}
.list-card .item--thumbnail {
    display: block;
    width: 100%;
    height: 100%;
}
.upload-input {
    display: none;
}
.upload--tip {
    font-size: 12px;
    color: #606266;
    margin-top: 7px;
}

.upload--box .upload-add {
    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--box .upload-add .bi-plus-lg {
    font-size: 28px;
    color: #8c939d;
}
.upload--box .item--actions {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    padding: 35px 0;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
}
.upload--box .item--actions span {
    display: none;
    cursor: pointer;
    margin: 0 7.5px;
}
.upload--box .item--actions:hover {
    opacity: 1;
}
.upload--box .item--actions:hover span {
    display: inline-block;
}

.upload-file--box .upload-add {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    background: #409eff;
}
.upload-file--box .list-card {
    margin: 0;
    padding: 0;
    list-style: none;
}
.upload-file--box .list-item {
    overflow: hidden;
    z-index: 0;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px 10px 10px 90px;
    width: auto;
    height: 92px;
    transition: all .5s cubic-bezier(.55,0,.1,1);
    font-size: 14px;
    color: #606266;
    line-height: 1.8;
    position: relative;
}
.upload-file--box .item--thumbnail {
    vertical-align: middle;
    display: inline-block;
    width: 70px;
    height: 70px;
    float: left;
    position: relative;
    z-index: 1;
    margin-left: -80px;
    background-color: #fff;
    font-size: 14px;
    color: #606266;
    line-height: 1.8;
}
.upload-file--box .item--name {
    display: block;
    line-height: 70px;
    margin-top: 0;
    color: #606266;
    margin-right: 40px;
    overflow: hidden;
    padding-left: 4px;
    text-overflow: ellipsis;
    transition: color .3s;
    white-space: nowrap;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.upload-file--box .bi-x {
    position: absolute;
    top: 2px;
    right: 5px;
    cursor: pointer;
    opacity: .75;
    color: #606266;
}
.upload-file--box .list-item:hover .item--name {
    color: #409eff;
}
複製代碼

3. 優化 JS

parseDom() 也要更新post

$(".upload--box .upload-add").click(function() {
    // $("input[name='fileCard']").click(); // 兩種方法均可以，選擇其中一種便可
    $(this).next().trigger("click");
});

$(document).on("change", "input[name='fileCard1']", function(e) {
    uploadFile = uploadFile.concat(Array.from(e.target.files));
    for (var idx = 0, len = uploadFile.length; idx < len; idx++) {
        readFile(uploadFile[idx], $(this));
    };
});

$(document).on("change", "input[name='fileCard2']", function(e) {
    uploadFile = uploadFile.concat(Array.from(e.target.files));
    for (var idx = 0, len = uploadFile.length; idx < len; idx++) {
        readFile(uploadFile[idx], $(this));
    };
});

function parseDom(url) {
    var listElement = $(".list-card");
    var parseTxt = "<li class='list-item'>"
                + "<img src=" + url + " class='item--thumbnail' alt=''>"
                + "<span class='item--actions'>"
                + "<span class='icon-preview'><i class='bi bi-zoom-in'></i></span>"
                + "<span class='icon-download'><i class='bi bi-download'></i></span>"
                + "<span class='icon-trash'><i class='bi bi-trash'></i></span>"
                + "</span></li>";
    listElement.append(parseTxt);
};
複製代碼

未完待續

期待下一遍，猜猜是什麼優化

（求關注）

歡迎關注個人公衆號：A綱 Coder，得到平常乾貨推送。最後再次感謝您的閱讀，我是程序猿憨憨ui