javascript - Remove button for each image thumbnail preview

hello, i need your help for my codes. I want to preview multiple images before upload and there are remove button in each images. But my code doesn't work when i'm using div targetting in each remove button.

the first, my codes is like THIS FIDDLE 1. and when i'm add some changes bee THIS FIDDLE 2

my 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>

and 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;    
}

it's my 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");
}
}

thanks for advance. any suggestions much be appreciated ^^

the first, my codes is like THIS FIDDLE 1. and when i'm add some changes bee THIS FIDDLE 2

my 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>

and 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;    
}

it's my 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");
}
}

thanks for advance. any suggestions much be appreciated ^^

Share Improve this question edited Aug 6, 2014 at 4:39 asked Aug 6, 2014 at 4:03 Vany Diah P 6433 gold badges12 silver badges26 bronze badges

You need to display the images on your page and then tick each one you want to upload. – Tasos Commented Aug 6, 2014 at 4:09
there's a button to choose multiple images. i just need a script to preview & delete each images... did u see my fiddles? – Vany Diah P Commented Aug 6, 2014 at 4:13
the button is for uploading pics .. what you are asking is a double function button and i don't think it exists. You need 2 buttons, one to choose pics to preview, and one to upload. and when you preview you don't need to delete -- just create a container box for each pic with a tick button to choose the picture. – Tasos Commented Aug 6, 2014 at 4:20
ok. but mmm actually what i want is like uploading images in facebook, when we add some photos, there's an "X"(remove) button in each thumbnails. and if the user don't want to upload certain images, he just click that "X" button. i'm sorry if my question doesn't clear. any suggestion? – Vany Diah P Commented Aug 6, 2014 at 4:32
yes exactly, or you could do something like this. jsfiddle/mkdskd/Z2745/5 -- all you need is to stick an upload button and cycle though the pics – Tasos Commented Aug 6, 2014 at 4:39

| Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

Image and delete anchor are children of div object. Put click event on each a, then delete the parent. So when user click the x mark, selected image will be deleted.

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

see demo at http://jsfiddle/L45LW/5/

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

This may be help you

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Remove button for each image thumbnail preview - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)