【 Front-end · Input optimization 】 About the optimization of input File control (2)

This is the third day of my participation in the August Text Challenge.More challenges in August

This is a control on the input file optimization series, interested friends can pay attention to me. Any questions about this article are welcome to correct and communicate.

The target

First of all, we will implement the control style, two control styles: picture upload style, file upload style

Another interface

    <div class="file-wrapper">
        <div class="upload--picture">Click on the upload</div>
        <input type="file" name="file" class="upload__input" />
        <div class="upload--tip">Only JPG/PNG files can be uploaded, and the maximum size is 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>
Copy the code

    .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;
    }
Copy the code

Interactive logic

Interactive logic requires jQuery

1. Click the selection box to trigger the Input event

If you use trigger(), you need to avoid the input box inside the selector box (fixed in the first article of this series), otherwise you may loop through the image and leak the memory.

$(".upload--picture-card").click(function() {$("input[name='fileCard']").click(); // You can use either method
    $("input[name='fileCard']").trigger("click");
})
Copy the code

Click and the file selection box will pop up

2. Parse image information, compile additional HTML and preview images

The input tag has the change event: the image is selected and the File object is returned

// Listen for the change event
$("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) { // Read the 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) { // Add a Dom node
    var listElement = $(".upload-list--picture-card");
    var parseTxt = "

       

        "
       
                + "<img src=" + url + " class='upload-list__item-thumbnail' alt=''>"
                + "</div></li>";
    listElement.append(parseTxt);
};
Copy the code

Related information: FileReader, FileReader event handling

To be continued

Both interfaces are complete, and you can select images to preview images now, next: Action bar events

(For attention)

Welcome to follow my official account: Class A Coder and get daily dry goods push. Thank you again for reading. I’m Han the Programming Monkey