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

Question

我想在每个缩略图旁边放一个小十字架，以便能够逐个删除它们。我可以通过点击它删除图像，但我想要单独的按钮“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

中的代码

你能帮帮我吗？

Answer 1

使用关闭按钮查看此示例：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).......
        ...................

的

Answer 2

点击＆＃34; x＆＃34;您可以从div img中删除thumbnail按钮，检查此fiddle

Answer 3

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

float:right;
position:relative;