I would like to upload the selected images through a multiple input type = 'file' to a container in real time, that is, I select a series of images and once accepted the samples in a modal window.
Googleando I have found code, which after modification, more or less fits in what I need.
What is my problem? Well, when loading the images I have fields like file.name, which comes from a filereader object, which is not updated and always returns the last file.
I pass some screens of the process:
The HTML code I use is the following:
<!-- IMAGES UPLOAD MODAL MENU -->
<div class="modal fade" id="imagesUpload" tabindex="-1" role="dialog" aria-labelledby="change" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Pujar Imatges</h3>
</div>
<form action="uploadImageAddcloud.php" id='formchange' method="post" enctype="multipart/form-data">
<div class="modal-body" id='imagesUploadContent'>
<output id='result'>
</div>
<div class="modal-footer ">
<div class="text-center">
<label class="custom-file-upload">
<input id='filesUpload' type="file" multiple/>
<input type="hidden" name="codigoUploadImage" value="<?php echo $codigo; ?>">
<input type="hidden" name="urlUploadImage" value="<?php echo $_SERVER["REQUEST_URI"]; ?>">
<i class="fa fa-cloud-upload"></i> Selecciona
</label>
<input class="btn btn-gral btn-tool-footer-medium btn-icon" id='btnUploadImagesCancelar' value="Cancel.lar">
<input type="submit" class="btn btn-gral btn-tool-footer-medium btn-icon" id='btnUploadImagesProcessar' value="Processar" style="background-color: #404040; color: white;">
</div>
</div>
</form>
</div>
</div>
</div>
And the function of Jquery is:
function handleFileSelect() {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
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 imageBox = $("<div class='box-image-library' id='box-image-library'> \
<img class='image-library' id='fileImageLibrary'/> \
<div class='btn-image-library-delete'> \
<button class='btn-image-library' data-action='delete'><i class='material-icons' style='font-size: 20px'>delete</i></button> \
</div> \
<div class='box-text-image-library-upload'> \
<span class='text-descripcio-image-library' id='text-descripcio-image-library'></span> \
</div> \
</div>");
// Insert Element in Box Content
$('#imagesUploadContent').append(imageBox);
// Set src img, filename and modify id elements
$('#fileImageLibrary').attr('src', picFile.result);
$('#text-descripcio-image-library').text(file.name);
$('#fileImageLibrary').attr('id','fileImageLibrary-' + file.name );
$('#text-descripcio-image-library').attr('id','text-descripcio-image-library-' + file.name );
});
//Read the image
picReader.readAsDataURL(file);
}
} else {
console.log("Your browser does not support File API");
}
}
document.getElementById('filesUpload').addEventListener('change', handleFileSelect, false);
A little the explanation of the Jquery would be the following: it controls that there is a file type object, this has to be of the image type, if it is it creates an HTML structure based on a template to format the element's visualization. It embeds the image from img src and the description.
I would appreciate any help-guidance, thank you!