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
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.
5 Comentarios
erik · marzo 1, 2023 a las 4:29 pm
Si lo que quieren es que no cambie el nombre y lo guarde en una carpeta con este arregleo lo haces la variable $uploads_dir es el nombre de la carpeta.
<?php
$conteo = count($_FILES["archivos"]["name"]);
$uploads_dir = 'archivos';
for ($i = 0; $i
Maryury Bonilla · marzo 3, 2022 a las 12:30 pm
Perfecto amigo, realice tu ejemplo con algunos pequeños ajustes a codeigniter y me sube perfecto. Gracias por el apoyo de dejar libre tu codigo, en realidad fue de gran ayuda para mis ejemplos.
Para el chico que se queja con el nombre porque se le guarda con unos codigos, le respodo que actualemente la linea de codigo del nombre es esta: $nuevoNombre = sprintf(“%s_%d.%s”, uniqid(), $i, $extension);
parzibyte · marzo 3, 2022 a las 12:34 pm
Gracias por sus comentarios. Saludos!
Nicolas · noviembre 24, 2021 a las 7:43 am
Cree una carpeta files para guardar los archivos pero cuando los subo , se cambia el nombre del archivo. Ejemplo: subo un archivo ejemplo.pdf y se pone como unos códigos.
parzibyte · noviembre 24, 2021 a las 8:53 am
Y cuál es el problema?