Leer multiples imagenes desde php

[Fernarey1810]

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:

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
 

Código Javascript:

function 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

[Alexis88]

Necesitas enviar las imágenes al servidor mediante una petición asíncrona (AJAX):

Código Javascript:

var ajax = new XMLHttpRequest(), 
    data = new FormData();
 
for (var i in files){
    data.append(i, files[i]);
}
 
ajax.open("POST", "guardar.php");
ajax.addEventListener("load", function(){
    this.status == 200 && console.log("Las imágenes han sido guardadas");
}, false);
ajax.send(data);
 

De esta manera, podrás recibir al conjunto de archivos de imagen en el archivo PHP que designes, pudiendo en él procesar su almacenamiento en el servidor (archivo físico) y en la base de datos (nombre del archivo).

[Fernarey1810]

Iniciado por Alexis88

Necesitas enviar las imágenes al servidor mediante una petición asíncrona (AJAX):

Código Javascript:

var ajax = new XMLHttpRequest(), 
    data = new FormData();
 
for (var i in files){
    data.append(i, files[i]);
}
 
ajax.open("POST", "guardar.php");
ajax.addEventListener("load", function(){
    this.status == 200 && console.log("Las imágenes han sido guardadas");
}, false);
ajax.send(data);
 

De esta manera, podrás recibir al conjunto de archivos de imagen en el archivo PHP que designes, pudiendo en él procesar su almacenamiento en el servidor (archivo físico) y en la base de datos (nombre del archivo).

Eso ya lo se hacer con esta libreria muy completa
http://plugins.krajee.com/file-input/demo

No hay forma de que al hacer clic en el boton se pueda leer esos archivos con el array $_FILES?, sin tener que recurrir a Ajax?

Código PHP:

echo '<pre>';
print_r($_FILES);
echo '</pre>';
 

[Alexis88]

No, por una muy sencilla razón: JavaScript trabaja del lado del cliente; PHP, del lado del servidor.

Solo como consejo acerca de eficiencia y rendimiento: para tareas tan sencillas que requieren de unas cuantas líneas de código, es preferible escribirlas que importar las miles de líneas de código que constituyen a una librería.

[Camatagua123]

Fernarey, tuve una duda algo parecida a la tuya.

Debes enviar las imagenes al servidor, y luego de validar que sea imagen, bla, bla, bla retornas desde el servidor los datos de las imagenes subidas, url, nombre, titulo, lo que quieras y mediante javascript construir y adicionar la imagen

Código:

var image = new Image(); // creas <img>
        image.height = 100; // Altura que deseas la imagen
        image.title = file.name; // nombre de imagen retornado desde servidor
        image.src = this.result; // url de imagen retornado desde servidor
        preview.appendChild( image ); //agregas la imagen recientemente creada al div #preview

si no quieres hacer eso, tendras que hacer un buen trabajo con las expresiones regulares, que encuentre todas las etiquetas <img> y obtener los nombres de las imagenes, el detalle es que no las tendras alojadas en tu servidor :V