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

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

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

目标

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

另一种界面

    <div class="file-wrapper">
        <div class="upload--picture">点击上传</div>
        <input type="file" name="file" class="upload__input" />
        <div class="upload--tip">只能上传jpg/png文件，且不超过500kb</div>
        <ul class="upload-list--picture">
            <li class="upload-list__item">
                <img src="https://picsum.photos/id/575/2509/1673"
                    alt="" class="upload-list__item-thumbnail">
                <a class="upload-list__item-name">food2.jpeg</a>
                <i class="bi bi-x"></i>
            </li>
            <li class="upload-list__item">
                <img src="https://picsum.photos/id/577/2509/1673" 
                    alt="" class="upload-list__item-thumbnail">
                <a class="upload-list__item-name">food2.jpeg</a>
                <i class="bi bi-x"></i>
            </li>
        </ul>
    </div>

    .file-wrapper {
        padding: 30px;
        width: 360px;
    }
    .upload--picture {
        display: inline-block;
        text-align: center;
        cursor: pointer;
        padding: 9px 15px;
        font-size: 12px;
        border-radius: 3px;
        color: #fff;
        background: #409eff;
    }
    .upload__input {
        display: none;
    }
    .upload--tip {
        font-size: 12px;
        color: #606266;
        margin-top: 7px;
    }
    .upload-list--picture {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .upload-list--picture .upload-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;
        height: 92px;
        transition: all .5s cubic-bezier(.55,0,.1,1);
        font-size: 14px;
        color: #606266;
        line-height: 1.8;
        position: relative;
    }
    .upload-list--picture .upload-list__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-list--picture .upload-list__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-list--picture .bi-x {
        position: absolute;
        top: 2px;
        right: 5px;
        cursor: pointer;
        opacity: .75;
        color: #606266;
    }
    .upload-list--picture .upload-list__item:hover .upload-list__item-name {
        color: #409eff;
    }

交互逻辑

交互逻辑需要用到 jQuery，引入 jQuery

1. 点击选择框触发 input 事件

jQuery 里的模拟点击事件有两种方法：
click() trigger()
这里需要注意，使用 trigger() 要避免 input 框在选择框里面（系列第一篇已修正），否则有可能会造成循环读取图片至内存泄漏。

$(".upload--picture-card").click(function() {
    $("input[name='fileCard']").click(); // 两种方法都可以，选择其中一种即可
    $("input[name='fileCard']").trigger("click");
})

点击后会弹出选择文件框就 ok 了

2. 解析图片信息，编译追加 HTML，预览图片

input 标签有 change 事件：选择图片后触发并返回 File 对象

// 监听 change 事件
$("input[name='fileCard']").change(function(e) {
    var uploadFile = e.target.files;
    for (var idx = 0, len = uploadFile.length; idx < len; idx++) {
        readFile(uploadFile[idx]);
    };
});
function readFile(file) { // 读取文件
    var reader = new FileReader();
    var fileType = file.type;
    reader.readAsDataURL(file); // base64
    reader.onload = function () {
        if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
            parseDom(this.result);
        }
    }
}
function parseDom(url) { // 添加 Dom 节点
    var listElement = $(".upload-list--picture-card");
    var parseTxt = "<li class='upload-list__item'><div style='height:100%;'>"
                + "<img src=" + url + " class='upload-list__item-thumbnail' alt=''>"
                + "</div></li>";
    listElement.append(parseTxt);
};

相关资料：FileReader， FileReader事件处理

未完待续

两种界面已经完成，并且可以选择图片预览图片了哈，下一篇：操作栏事件

（求关注）

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