Subir Múltiples Archivos con PHP y Ajax

Subir Múltiples Archivos con PHP y Ajax

Hace días realice un tutorial sobre como subir un archivo a una Base de Datos utilizando PHP, como lo describí anteriormente solo podemos subir un archivo a la vez. ¿Pero que sucede cuando en nuestra aplicación requerimos que el usuario suba varios archivos al mismo tiempo?

Bueno en este artículo presentare un tutorial para poder Subir Múltiples Archivos con PHP usando la tecnología Ajax ayudándonos de la librería JavaScript jQuery.


Este ejemplo subirá varios archivos a una carpeta ubicada en la misma ruta de nuestro proyecto por medio de AJAX, utilizando la función Ajax de jQuery (véase jQuery Ajax) recuperaremos un mensaje que mostraremos al usuario en la página principal.


Ahora iniciemos con la creación de nuestros archivos que integraran el proyecto.

  • Creamos los siguientes archivos vacios en la carpeta de nuestro Proyecto.
  1. index.html: Contendrá el Frond-end de nuestra aplicación, en donde se mostrara el input file y el botón enviar.
  2. script.js: Contendrá las funciones javascript que enviara la información al servidor.
  3. subir.php: Script de php que recibirá los archivos y los almacenara en una carpeta de nuestro servidor.
Contenico del Proyecto

Contenido del Proyecto


  • Creamos un archivo con el nombre index.php que contendrá en la vista inicial de nuestra aplicación, este archivo contendrá un formulario para enviar los archivos al servidor, la sintaxis será la siguiente:

Escribimos nuestra estructura HTML.

  • En nuestra cabecera Head, añadimos las referencias javascript hacia nuestro archivo script y hacia el CDN de jQuery.

  • A continuación en la misma cabecera creamos un estilo CSS para nuestro documento.

 

  • Dentro del <Body> Insertamos a nuestro gusto un input file, y un button con los siguientes atributos.

  • Podemos observar que el input file tiene un atributo llamado múltiple, este atributo permite poder seleccionar varios archivos del explorador, el archivo Index Completo Quedaría de la siguiente Manera.


  • Creamos un archivo JavaScript que se encargara de hacer el trabajo pesado. Juntar los archivos Seleccionados y enviarlos a nuestro script php.

Comenzamos por crear la función jQuery que activara el Botón, cuando el documento este totalmente cargado.

 

Creamos la función SubirFotos, que recuperara los archivos seleccionados y los agrupara en un arreglo del tipo FormData(), este objeto permite ordenar un arreglo de datos con el formato valor,dato y serializarlo para después pasarlo por método POST.

Utilizando la función $.ajax de jQuery, podemos pasar datos a el servidor sin necesidad de recargar la página. Esta función tiene una subfunción .done(), que permite recuperar el mensaje que devuelve el servidor para poder utilizarlo como string, en esta ociación el mensaje resultante se captura en la variable msg y se pasa como parámetro a la función MensajeFinal(msg).

Ahora creamos una función MensajeFinal()que se encargara de mostrar el mensaje en la pantalla.

Al final nuestro documento script.js Quedará de la siguiente Manera.


    • Para finalizar Creamos un archivo con el nombre subir.php, este script php recibirá los archivos y los almacenara en la carpeta Files.

Aquí un video con la explicación.

Codigo Fuente

De esta manera podemos realizar el upload de múltiples archivos a un servidor con PHP utilizando la tecnología AJAX, sin necesidad de recargar la página.

Me despido de ustedes y espero que lo explicado les sea de mucha utilidad.

Espero sus comentarios y recomendaciones.

Subir Múltiples Archivos con PHP y Ajax

Angel Gutierrez Monola

Developer Boy Amante de la tecnología. Apasionado del Béisbol⚾ Fundador de http://Gumonet.com Emprendedor por Pasión Y Lector por distracción.

You may also like...

19 Responses

  1. Diego dice:

    Brother , me gustaria saber como hacerle para poder meter 2 fotos o mas diferentes pero con el mismo nombre porfavor

    • Diego, deberias de crear dos tablas:
      En la primera colocar el nombre de la foto.
      En la segunda almacenar las fotos con una relación hacia la primera.
      De esa manera tendrias relaciones una a muchas. y podrias almacenar muchas fotos con un solo identificador.

  2. Fidel dice:

    Hola¡ podrías decir como poner la ruta y datos de la foto en luna base de datos?
    Saludos y gracias.
    Fidel
    Ejemplo

    Producto:
    Precio:
    detalles:
    foto1:
    foto2:
    foto3:
    Hay muchos tutoriales pero no encuentro ninguno que pueda hacer esto, que suba las fotos al una carpeta y las rutas de las fotos mas los datos a la base de datos. Si sabe de algún tutorial.

    • Hola Fidel. Primero muchas Gracias por leer mi articulo.
      Respecto a tu pregunta. No entiendo claramente tu pregunta.

      Podrias porfavor ponerte en contácto conmigo y aclaramos mejor tu duda?
      En la parte de arriba de esta página estan unos iconos hacia mis redes sociales.

      Saludos

  3. Luis Eduardo Romero Olmos dice:

    Una pregunta estoy desarrollando una pagina y en esta me pidieron crear un administrador y dentro de este un fomulario que al enviar publique articulos con extencion html en mi host ¿Como podria hacerle? uso Javascript? php?
    Espero me contestes pronto Gracias

  4. Fidel dice:

    Gracias por contestar mis mensajes, lo que yo digo es un formulario para poder mandar los datos y mas de una foto, por ejemplo un producto con su nombre sus precio y varias fotos y guardar las url de las fotos en la bd. y las fotos en una carpeta del servidor.
    Yo lo puedo hacer con una foto pero no lo logro con más.
    Saludos y gracias.
    Fidel

  5. Fidel dice:

    (datafile-upload-and-management-source)
    Como este Scripts pero que suba varias fotos.
    Si me dices donde te mando el Scripts.

  6. Fidel dice:

    Este es el Scripts
    (datafile-upload-and-management-source)

    https://www.mediafire.com/?yjsnf5erqkx226g

    por favor si lo mira y lo puede hacer para mas de una foto.

    • Hola Fidel. Pues debes de hacer lo siguiente:
      En tu formulario colocar 3 input type file.
      Y en tu base de datos colocar 3 campos para guardar las 3 rutas en donde se almacene el archivo.

      Depues de esto solo tienes que hacer lo mismo que haces para subir una foto.

  7. andres meneses dice:

    sera posible que saques el video 9 de colocar un resumen y boton para descargar el contenido de la lectura.

  8. andres meneses dice:

    sera posible que publique el video 9 del curso php, html, jquery por favor que lo necesito urgente.

  9. cristiandvp dice:

    Es una belleza tu código, se agradece el aporte

  10. coloman dice:

    hola, como se hace para enviar una variable por input hidden ? quiero enviar un id

  11. Buen dia, quiero agregar un input text para colocarle el nombre a mi carpeta, el problema es que no se manda a subir.php y el data:archivos; no lo puedo ajustar, como podria hacerlo

  12. Victor dice:

    Amigo, muchas gracias por tu publicación; Una duda a que se debe que no me sube los archivos a la carpeta especificada en $path; De antemano muchas gracias!!

  13. cristian matias dice:

    yo cree un keygen web online
    es un generador de serial de windows xp online
    es el primer keygen online que exite en internet hecho en php
    lo que exite es un keygen que es un sofware que genera serial pero no es online

  14. cristian matias dice:

    te lo puedo pasar la programacion

  1. 11 noviembre, 2014

    […] este tutorial aprenderemos a LISTAR ARCHIVOS DE UN DIRECTORIO CON PHP en nuestro servidor APACHE, vamos a crear una función la cual podremos utilizar en cualquiera de […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *