自定义上传图片，动态拼接html元素，node插入/替换指定位置旧元素

<!DOCTYPE html>

<head>
    <meta name="viewport"
        content="width=device-width,initial-scale=0.5,maximum-scale=1.0,minimum-scale=0.5,user-scalable=yes">
    <title>上传图片</title>
</head>

<body>
    <div class="info-title">
        <span>上传图片</span>
    </div>
    <div class="div-image">
        <div id="imageContent" class="div-image-upload">
        </div>
        <input class="uploadImg" type="file" name="file1" id="filePath" accept="image/*">
        <br>
        <div class="reg"><a href="/info">迁移</a></div>
        <br>
    </div>
</body>
<script>
    const inputFile = document.getElementById("filePath");
    const imageContent = document.getElementById("imageContent");
    var list = [];
    var uploadIndex = 0;
    inputFile.addEventListener('change', function (event) {
        const { files } = this;
        const f = files[0];
        const imageSrc = URL.createObjectURL(f);
        const template = "<div class='div-image-item'>" +
            "<img src=" + imageSrc + " alt='' id='image" + uploadIndex + "'>" +
            "<div class='image-close' onclick='delImageClick(" + uploadIndex + ")'><span></span> </div>" +
            "</div>";
        let tempNode = document.createElement('div');
        tempNode.innerHTML = template;
        // 替换指定的节点
        imageContent.replaceChild(tempNode.firstChild, imageContent.childNodes[uploadIndex]);
        list[uploadIndex] = imageSrc;

        // 允许相同文件上传
        event.target.value = "";
    });
    window.onload = function () {
        // TODO 数据获取
        list = ["https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
            "https://img.alicdn.com/tfs/TB1Z0PywTtYBeNjy1XdXXXXyVXa-186-200.svg", "", "", "", "", "", "", ""];

        showData();
    };
    // 显示数据
    function showData() {
        var htmlStr = "";
        for (var i = 0; i < list.length; i++) {
            var item = list[i];
            if (item === "") {
                htmlStr += "<div id='btnUpload" + i + "' class='div-image-item2 btn-upload'>" +
                    "<div class='upload-image' onclick='uploadImage(" + i + ")'>" +
                    "<div class='add'></div>" +
                    "</div>" +
                    "</div>";
            } else {
                htmlStr += "<div class='div-image-item'>" +
                    "<img src=" + item + " alt='' id='image" + i + "'>" +
                    "<div class='image-close' onclick='delImageClick(" + i + ")' ><span></span> </div>" +
                    "</div>";
            }
        }
        imageContent.innerHTML = htmlStr
    }
    // 触发上传文件
    function uploadImage(currIndex) {
        uploadIndex = currIndex;
        inputFile.click();
    }
    // 删除图片
    function delImageClick(currIndex) {
        // list.splice(currIndex, 1);
        list[currIndex] = "";
        const template = "<div id='btnUpload" + currIndex + "' class='div-image-item2 btn-upload'>" +
            "<div class='upload-image' onclick='uploadImage(" + currIndex + ")'>" +
            "<div class='add'></div>" +
            "</div>" +
            "</div>";
        let tempNode = document.createElement('div');
        tempNode.innerHTML = template;
        // 替换指定的节点
        imageContent.replaceChild(tempNode.firstChild, imageContent.childNodes[currIndex]);
    };
</script>
<style>
    body {
        padding: 0;
        margin: 0;
        height: 100vh;
        background-color: #9e9e9e30;
        height: 100vh;
    }


    .info-title {
        margin: auto;
        top: 5%;
        position: relative;

        text-align: center;
    }

    .info-title span {
        color: #3c3c3c;
        font-size: 24px;
        font-weight: bold;
    }

    .div-image {
        display: flex;
        align-items: center;
        margin: auto;
        flex-direction: column;
        top: 10vh;
        position: relative;
        flex-wrap: wrap;
        width: 80%;
    }

    .div-image-upload {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
    }

    .div-image-item {
        flex: 0 0 calc(33.33% - 4rem - 4px);
        margin: 2rem;
        position: relative;

        color: #ccc;
        border: 2px dashed;
    }

    .div-image-item2 {
        flex: 0 0 calc(33.33% - 4rem);
        margin: 2rem;
        position: relative;
    }

    .btn-upload {
        cursor: pointer;
    }

    .disabled-upload {
        pointer-events: none;
        cursor: not-allowed;
    }

    .disabled-upload .add {
        background: #dddddd;
    }

    .add {
        display: inline-block;
        width: 100%;
        height: 15rem;
        color: #ccc;
        border: 2px dashed;
        transition: color .25s;
        position: relative;
        overflow: hidden;
    }

    .add:hover {
        color: #34538b;
    }

    .add::before,
    .add::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
    }

    .add::before {
        width: 20px;
        border-top: 4px solid;
        margin: -2px 0 0 -10px;
    }

    .add::after {
        height: 20px;
        border-left: 4px solid;
        margin: -10px 0 0 -2px;
    }

    img {
        object-fit: contain;
        width: 100%;

        height: 15rem;
        margin: auto;
    }

    input.uploadImg {
        display: inline-block;
        width: 100%;
        height: 100%;
        display: none;
    }

    .image-close {
        width: 40px;
        height: 40px;
        border: 1px solid #F44336;
        border-radius: 50%;
        line-height: 35px;
        text-align: center;
        position: absolute;
        right: -10px;
        top: -10px;
        cursor: pointer;
    }

    .image-close:hover {
        border: 1px solid #f11404;
    }

    .image-close span {
        display: inline-block;
        width: 30px;
        height: 4px;
        background: #F44336;
        transform: rotate(45deg);
    }

    .image-close span::after {
        content: '';
        display: block;
        width: 30px;
        height: 4px;
        background: #F44336;
        transform: rotate(-90deg);
    }

    .reg {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .reg a {
        font-size: 16px;
        font-weight: 100;
        margin-right: 2rem;
    }

    .reg a:hover {
        color: rgb(120, 120, 255);
    }
</style>

</html>
posted @ 2023-06-07 09:04  小小菜鸟04  阅读(30)  评论(0)    收藏  举报