En este blog te he enseñado cómo subir uno o varios archivos con HTML y PHP puro, así como subir un archivo con AJAX usando FormData.

Ahora te voy a enseñar cómo subir varios archivos (ilimitados o sin una longitud fija) usando JavaScript, AJAX, FormData y PHP.

Subir varios archivos con AJAX y PHP

Subir varios archivos con AJAX y PHP

Preparando el lado del servidor

En el caso de PHP no vamos a necesitar hacer muchas cosas, vamos a seguir leyendo de $_FILES justo como cuando subíamos múltiples archivos de la manera normal.

Fíjate en que recorremos el arreglo de archivos, creamos un nuevo nombre (concatenando un id único obtenido con uniqid y el índice del arreglo) y movemos el archivo desde la ubicación temporal a la ubicación del script.

El archivo se llama guardar.php y al final imprimirá un true como JSON indicando que toda la operación fue correcta. Ahora veamos el lado del cliente.

Subir múltiples archivos con AJAX y PHP

En el lado del cliente comencemos viendo el diseño HTML. Solo tenemos un div de estado (en donde vamos a mostrar mensajes), el campo para subir los archivos y el botón que hace la subida de archivos.

Para obtener una referencia a los elementos usamos el id de cada uno. Por ahora tenemos inputArchivos, estado y btnEnviar. Los obtenemos desde JavaScript y hacemos el envío con el siguiente código:

Lo importante aquí es que obtenemos los archivos del input accediendo a su propiedad files. Luego agregamos una entrada al formData por cada archivo que haya, pero fíjate en que lo estamos agregando a archivos[] con todo y corchetes.

Finalmente enviamos el formData a guardar.php usando fetch de JavaScript en la línea 22.

Poniendo todo junto

El código completo lo puedes encontrar en el repositorio de GitHub. Recuerda que si quieres ver lo básico puedes ver cómo subir un archivo a PHP, subir varios archivos usando solo PHP o subir un archivo con AJAX y PHP.

También puedes explorar más sobre PHP o JavaScript en mi blog.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 1,134 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

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

A %d blogueros les gusta esto: