I am adding images by javascript, but before doing the upload of the file I show in a thumbnail the preview of this image, so far everything goes exactly right, however I want it when I click to add another image (having one already selected) I pass the input selector with one more image, without losing the last selection. I also want when I click on fechar(x) it will close only the image that is selected.
My code that does the work:
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" />