這是我參與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. 圖片放大預覽

思路：一、獲取圖標元素的父級元素的上一個同胞元素的 src 屬性值，二、把獲取到的 src 屬性值賦值到要預覽的標籤裏，三、顯示模態框

<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，得到平常乾貨推送。最後再次感謝您的閱讀，我是程序猿憨憨