为每个图像缩略图预览添加删除按钮

Adding delete button for each image thumbnail preview

本文关键字：添加删除按钮 略图 图像      更新时间：2023-09-26

我想在每个缩略图旁边放一个小叉，以便能够逐个删除它们。我能够通过点击它来删除图像，但我想有单独的按钮"x"来删除它。

fileInput.addEventListener("change", function (e) {
        var filesVAR = this.files;
        showThumbnail(filesVAR);
    }, false);

    function showThumbnail(files) {
        var file = files[0]
        var image = document.createElement("img");
        var thumbnail = document.getElementById("thumbnail");
        image.file = file;
        image.setAttribute('class', 'imgKLIK5');
        thumbnail.appendChild(image)
        var reader = new FileReader()
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result;
            };
        }(image))
        var ret = reader.readAsDataURL(file);
        var canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        image.onload = function () {
            ctx.drawImage(image, 100, 100);
        }
    }
});

下面是我在JFIDDLE

中的代码你能帮我一下吗?

查看关闭按钮的示例:http://jsfiddle.net/kevalbhatt18/r0taz01L/1/

<我> 

 $('div').on('click', '.closeDiv', function () {
        $(this).prev().remove();
        $(this).remove();
        $('#upload-file').val("");
    });

我在你的showThumbnail函数

中做了这些修改

<我>

 function showThumbnail(files) {
        var file = files[0]
        var thumbnail = document.getElementById("thumbnail");
        var pDiv = document.createElement("div");
        var image = document.createElement("img");
        var div = document.createElement("div");

        pDiv.setAttribute('class', 'pDiv');
        thumbnail.appendChild(pDiv);

        image.setAttribute('class', 'imgKLIK5');
        pDiv.appendChild(image)
        div.innerHTML = "X";
        div.setAttribute('class', 'closeDiv');
        pDiv.appendChild(div).......
        ...................

只需在每个预览中添加新的button元素，并使用以下样式属性，

float:right;
position:relative;

您可以将img从div thumbnail中移除，点击"x"按钮，查看此页面

相关文章：