Good morning,
I'm doing a job for a web page, in which I must put a button to upload images to the web, and I need to see a preview of those images to be loaded before uploading.
<input type="file" id="file_input" name="fileInput" multiple />
I am currently loading them with this code in JavaScript:
//Cargo las imagenes del input y le digo que ejecute el metodo preview
var upload = document.getElementById("file_input");
upload.addEventListener("change", preview, false);
function preview() {
//Obtengo las imagenes subidas
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
//Como puedo subir multimples archivos, hago un for para recorrer todo lo subido
for (var i = 0; i < fileList.length; i++) {
var objectUrl = anyWindow.createObjectURL(fileList[i]);
//Añado en una parte del form el img con la ruta de la foto
$("#form_fotos").append(
"<img class='uploaded_foto' src='"+ objectUrl + "'/>");
window.URL.revokeObjectURL(fileList[i]);
}
}
So far everything works well, the images appear, the problem I have is if you press the upload button again, wanting to add more photos, the previous ones disappear from the upload button, the preview does not disappear, that is to say in the same page is still there, but when you complete the form and submit, only the last one that has been uploaded continues.
Example: I'm going to select 5 photos to upload, the first time I click upload and I select 3 photos, these 3 photos will load your preview on the page. A few seconds later I upload another 2 photos, the 2 photos are also loaded on the page with the preview. The upload button changes its text: Before "3 selected files", now "2 selected files" It is as if the previous ones have been lost. When doing the submit, I only receive that these last 2 images have been uploaded.
I do not know if there is any way to tell the input file that I want to continue adding photos.
I hope someone can guide me.
Thanks in advance.