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