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

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

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

目标

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

另外一种界面

<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，引入 jQuerymarkdown

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

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

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

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

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

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

// 监听 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事件处理优化

未完待续

两种界面已经完成，而且能够选择图片预览图片了哈，下一篇：操做栏事件ui

（求关注）

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