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

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

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

目标

操作栏事件：图片放大预览，下载图片，删除图片

交互逻辑

第一步：在 parseDom 方法里添加操作栏的 Dom 结构

+ "<span class='upload__item-actions'>"
+ "<span class='upload__icon'><i class='bi bi-zoom-in'></i></span>"
+ "<span class='upload__icon'><i class='bi bi-download'></i></span>"
+ "<span class='upload__icon'><i class='bi bi-trash'></i></span>"
+ "</span>"

第二步：添加样式

.upload-list--picture-card .upload__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-list--picture-card .upload__item-actions span {
    display: none;
    cursor: pointer;
    margin: 0 7.5px;
}
.upload-list--picture-card .upload__item-actions:hover {
    opacity: 1;
}
.upload-list--picture-card .upload__item-actions:hover span {
    display: inline-block;
}

第三步：给每个图标添加操作事件

注意：三个事件都要用到事件代理，防止后面追加图片时事件无效

$(".upload-list--picture-card").on('click', '.icon-preview', function() { // 图片预览

});

$(".upload-list--picture-card").on('click', '.icon-download', function() { // 图片下载

});

$(".upload-list--picture-card").on('click', '.icon-trash', function() { // 图片删除

});

1. 图片放大预览

思路：1、获取图标元素的父级元素的上一个同胞元素的 src 属性值，2、把获取到的 src 属性值赋值到要预览的标签里，3、显示模态框

<div class="mask">
    <div class="mask-content"></div>
</div>

/* mask */
.mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
}
.mask .mask-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-clip: border-box;
    border-radius: 8px;
    overflow: hidden;
}

$(".upload-list--picture-card").on('click', '.icon-preview', function() {
    var preSrc = $(this).parent().prev().attr("src");
    $(".mask .mask-content").attr("style", "background-image: url(" + preSrc + ")");
    $(".mask").fadeIn("fast");
});

最终效果

2. 图片下载

思路：创建 a 标签，把 src 属性值赋值给 a 标签

$(".upload-list--picture-card").on('click', '.icon-download', function() {
    var a = document.createElement('a');
    var imgUrl = $(this).parent().prev().attr("src");
    a.href = imgUrl
    a.setAttribute('download', imgUrl);
    a.click();
});

3. 图片删除

思路：把 uploadFile 设置成全局变量，把 files 存到 uploadFile 里。 删除相应序号的图片，移除相应序号的元素节点

$(".upload-list--picture-card").on('click', '.icon-trash', function() {
    var $parent = $(this).parent().parent();
    var curIndex = $parent.index();
    console.log(curIndex , uploadFile)
    uploadFile.splice(curIndex, 1);
    $parent.fadeOut(500, function () {
        $parent.remove()
    });
    $("input[type='file']").value = "";
});

未完待续

三个操作事件已经完成了哈，期待下一遍，猜猜是什么

（求关注）

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