Encontré el siguiente código para generar imágenes en miniatura a medida que se va seleccionando un archivo, y funciona muy bien tanto para 1 imagen como para multiples imagenes. Como leo estos datos desde PHP para guardar los nombres en una base de datos?
https://developer.mozilla.org/en-US/.../readAsDataURL
Código HTML:
Ver original<input id="browse" type="file" onchange="previewFiles()" multiple>
Código Javascript
:
Ver originalfunction previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild( image );
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
Cuando inspecciono las imagenes a medida que las subo veo lo siguiente:
https://ibb.co/bULPZk