me gustaría cargar las imágenes seleccionadas a través de un input type='file' multiple a un contenedor en tiempo real, es decir, selecciono una serie de imágenes y una vez aceptado las muestra en una ventana modal.
Googleando he encontrado código, el cual después de modificación, mas o menos se ajusta en lo que necesito.
Que problema tengo? Pues que al cargar las imágenes tengo campos como file.name, que viene de un objeto filereader, que no se actualiza y me devuelve siempre el último fichero.
Os paso unas pantallas del proceso:
El código HTML que utilizo es el siguiente:
<!-- 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>
Y la función de Jquery es:
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);
Un poco la explicación del Jquery sería la siguiente: controla que haya un objeto tipo fichero, éste ha de ser del tipo imagen, si lo es crea un estructura HTML basada en una plantilla para dar formato a la visualización del elemento. En ella incrusta la imagen desde img src y la descripción.
Agradecería cualquier tipo de ayuda-orientación, gracias!