每个图像缩略图预览的删除按钮答案

【问题标题】：Remove button for each image thumbnail preview每个图像缩略图预览的删除按钮
【发布时间】：2014-08-06 04:03:30
【问题描述】：

您好，我的代码需要您的帮助。我想在上传前预览多张图片，每张图片中都有删除按钮。但是当我在每个删除按钮中使用 div 定位时，我的代码不起作用。

首先，我的代码类似于THIS FIDDLE 1。当我添加一些更改时变为THIS FIDDLE 2

我的 HTML：

<body>
<header>
    <h1>File API - FileReader</h1>
</header>
<article>
    <label for="files">Select multiple files: </label>
    <input id="files" type="file" multiple/>
    <output id="result" />
</article>

和CSS：

body{
font-family: 'Segoe UI';
font-size: 12pt;
}

header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;

 }
 article
{
width: 80%;
margin:auto;
margin-top:10px;
}


 .thumbnail{

height: 100px;
margin: 10px;    
}

这是我的javascripts：

 window.onload = function(){

//Check File API support
if(window.File && window.FileList && window.FileReader)
{
    var filesInput = document.getElementById("files");

    filesInput.addEventListener("change", function(event){

        var files = event.target.files; //FileList object
        var output = document.getElementById("result");

        for(var i = 0; i< files.length; i++)
        {
            var file = files[i];

            //Only pics
            if(!file.type.match('image'))
              continue;

            var picReader = new FileReader();

            picReader.addEventListener("load",function(event){

                var picFile = event.target;

                var div = document.createElement("div");

                div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                        "title='" + picFile.name + "'/> <a href='#' class='remove_pict'>X</a>";

                output.insertBefore(div,null);            

            });

             //Read the image
            picReader.readAsDataURL(file);
        }                               

    });
}
else
{
    console.log("Your browser does not support File API");
}
}

感谢您的提前。任何建议都非常感谢^^

【问题讨论】：

您需要在页面上显示图片，然后勾选您要上传的每一张。
有一个按钮可以选择多个图像。我只需要一个脚本来预览和删除每个图像...你看到我的小提琴了吗？
这个按钮是用来上传图片的。你问的是一个双功能按钮，我认为它不存在。您需要 2 个按钮，一个用于选择要预览的图片，一个用于上传。当你预览时你不需要删除——只需为每张图片创建一个容器框，并带有一个勾选按钮来选择图片。
好的。但实际上我想要的是在 facebook 中上传图片，当我们添加一些照片时，每个缩略图中都有一个“X”（删除）按钮。如果用户不想上传某些图像，他只需点击那个“X”按钮。如果我的问题不清楚，我很抱歉。有什么建议吗？
是的，或者你可以做这样的事情。 jsfiddle.net/mkdskd/Z2745/5 -- 你只需要粘贴一个上传按钮并循环浏览图片

标签： javascript jquery html css ajax

【解决方案1】：

Image 和 delete anchor 是 div 对象的子对象。将click 事件放在每个a 上，然后删除父级。所以当用户点击x标记时，选中的图片将被删除。

div.children[1].addEventListener("click", function(event){
    div.parentNode.removeChild(div);
});

在http://jsfiddle.net/L45LW/5/查看演示

【讨论】：

【解决方案2】：

$("#result").on( "click",".remove_pict",function(){
    $(this).parent().remove();
});

这可能对你有帮助

【讨论】：

请添加jquery文件
该代码不起作用，因为在这种情况下没有使用 jQuery。试试我的答案。