如何删除上传的图片？答案

【问题标题】：How can I delete image uploaded?如何删除上传的图片？
【发布时间】：2017-05-20 18:36:54
【问题描述】：

我的html代码是这样的：

<input type='file' multiple/>
<?php
    for($i=0;$i<5; $i++) {
?>
    <div class="img-container" id="box<?php echo $i ?>">
        <button  style="display: none;" type="submit" class="btn btn-danger show-button">
            <i class="glyphicon glyphicon-trash"></i>
        </button>
    </div>
<?php
    }
?>

我的javascript代码是这样的：

    $(function () {
        $(":file").change(function () {
            var noOfFiles = this.files.length;
            for(var i=0; i < noOfFiles; i++) {        
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[i]);
            }        
        });
    });

    function imageIsLoaded(e) {
        var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
        var IsImgAdded=false;
        $('.img-container').each(function(){
            if($(this).find('img').length==0 && IsImgAdded==false){
                $(this).append(imgTmpl);
                IsImgAdded=true;
                $(this).find('.show-button').show();
            }
        });     
    };

    $(".show-button").click(function(){
        $(this).find('img').hide()
    });

演示和完整代码如下：http://phpfiddle.org/main/code/uu9x-w50q

我尝试使用隐藏图像。但它不起作用

我该如何解决这个问题？

【问题讨论】：

$(".show-button").on("click", function() { $(this).siblings('img').hide(); });
@Gerard，它有效。但是，它只是删除图像。如何同时删除“删除图标”？
在函数中添加这个：$(this).hide();
@Gerard，它有效，但有点奇怪。当我上传 3 张图片时。然后我删除了2张图片。然后我上传了1张图片。图片上传到 4 号盒子。应该先上传到 2 号盒子。看看这个：postimg.org/image/dw0rlysl5
具体来说，你的代码中没有上传操作，也就是说你不能删除没有上传的图片。也许您正在谈论从文档阵容中删除图像标签，以便您可以摆脱已经/已经添加到文档流中的图像。请具体一点，我也检查了你的代码，找不到任何 PHP/服务器端上传代码。

标签： javascript php jquery html css

【解决方案1】：

您应该使用parent 方法来实现这一点，因为image DOM 元素属于.show-button 的parent。

$(document).on('click',".show-button",function(){
    var imgTmpl = '<div class="img-container">'+
               '<button  style="display: none;" type="submit" class="btn btn-danger show-button">'+
               '<i class="glyphicon glyphicon-trash"></i>'+
                '</button></div>';
    $(this).parent().remove();
    $('body').append(imgTmpl);
});

这里是solution.

【讨论】：

它有效。但是，它只是删除图像。如何同时删除“删除图标”？
它有效，但有点奇怪。当我上传 3 张图片时。然后我删除了2张图片。然后我上传了1张图片。图片上传到 4 号盒子。应该先上传到 2 号盒子。看看这个：postimg.org/image/dw0rlysl5
@samueltoh，你应该改用remove 方法。看看更新的答案。
你也应该有 $(this).remove();或 $(this).show();某处
@Alexandru-Ionut Mihai，它有效。但仍有1个不足之处。例如，我上传了 3 张图片。然后我删除第一个框中的图像。我希望框 2 上的图像转移到第一个框。而第三个盒子上的图像转移到第二个盒子。怎么办？

【解决方案2】：

试试closest()

 $(".show-button").click(function(){
        $(this).closest('.img-container').find('img').hide()
        //$(this).closest('.img-container').children().remove() used for remove the all child element of the `.img-container`
        console.log('hi')
    });

【讨论】：

它有效。但是，它只是删除图像。如何同时删除“删除图标”？
//$(this).closest('.img-container').children().remove() used for remove the all child element of the .img-container 看到这个。我对这个 sn-p 发表了评论。你可以启用它。它会删除所有的内在孩子