Adding multiple javascript images

Question

I’m adding images by javascript, only before I literally do the upload of the file I show in a thumbnail the preview of this image, so far everything goes exactly well, but I want that when I click to add another image (having one already selected) I pass the selector input with another image, without losing the past selection. I also want when I click on fechar(x) it only closes the image that is selected.

My code that does the job:

            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 del'><i class=\"icon-remove\"></i></a> <div class=\"control-group\">                         <label class=\"control-label\" for=\"MEM_LEGEN_IMAGM\">Legenda</label>                          <div class=\"controls\"><input id=\"MEM_LEGEN_IMAGM\" name=\"MEM_LEGEN_IMAGM[]\" type=\"text\" class=\"input-xlarge\">     </div>                </div>         <div class=\"control-group pull-right linkImg\"><label class=\"control-label\" for=\"TXT_LINKX_URLXX\">Link</label><div class=\"controls\"><input id=\"TXT_LINKX_URLXX\" name=\"TXT_LINKX_URLXX[]\" type=\"text\" class=\"input-xlarge\">        </div>            </div>"+" <input name=\"files[]\" type=\"file\" />";

                                output.insertBefore(div, null);
                                div.children[1].addEventListener("click", function (event) {
                                    div.parentNode.removeChild(div);
                                    filesInput.value = filesInput.defaultValue;
                                });

                            });

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

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

            .thumbnail {
                width: 30vw;
                height: 18vh;
                margin: 20px 145px 0 0;
                margin-top: 6px;
            }
            .del{
                margin-top: -19vh;
                float: left;
                margin-left: -16px;
            }
            #tamb{
                width: 586px;
                height: 184px;
                background:#ABABAB;
                margin: 20px 145px 0 0;
                color: #5F5F5F;
                text-align: center;
                font-size: 14px;
                vertical-align: middle;
                display: table-cell;
            }
            .linkImg{
                margin-top: -6vh;
            }
            #fot01{
                height:27px;
            }

                                <input id="files" name="files[]" type="file" multiple />
                                <output id="result" />