Subir varios archivos con AJAX y PHP
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.
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.
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.
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.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.
Ver comentarios
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
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);
Gracias por sus comentarios. Saludos!
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.
Y cuál es el problema?