【前端 · 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