Question

remove button in each thumbnail

你好，我需要你帮助我的代码。我想在上传之前预览多个图像，每个图像中都有删除按钮。但是，当我在每个删除按钮中使用div target时，我的代码无法正常工作。

第一个，我的代码就像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");
}
}

感谢您的进步。任何建议值得赞赏^^

Answer 1

图片和删除锚点是div对象的子项。将click事件放在每个a上，然后删除父项。因此，当用户点击 x标记时，将删除所选图像。

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

请参阅http://jsfiddle.net/L45LW/5/

上的演示

Answer 2

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

这可能对您有所帮助

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

2 个答案: