Subida múltiple de archivos con PHP y HTML5
Vuelta al cole y vuelta al trabajo, después de unas cortas vacaciones vuelvo de nuevo con los artículos, que se me han ido acumulando en este tiempo de ausencia (nunca se llega a desconectar del todo).
En el primer artículo del nuevo curso voy a poneros un ejemplo que me preguntaron en un comentario de un artículo reciente, se trata de subir uno o varios ficheros a la vez a un directorio con PHP. Para ello vamos a utilizar las características de HTML5 que entre muchas otras ventajas que poco a poco veremos soporta la subida de archivos múltiple acompañado por PHP5.
Para este ejercicio vamos a tener un único archivo (index.php) que es donde tendremos tanto el código del formulario de subida de ficheros como el código PHP que procese los datos transmitidos para subir los archivos.
Primero de todo desglosamos el código por partes, después veremos el resultado completo para no liarnos.
En la parte HTML tenemos un formulario de subida de ficheros con los atributos multiple y directory.
<form method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory="">
<input class="button" type="submit" value="Upload" />
</form> |
En el apartado PHP tenemos 2 secciones, una para listar los archivos que ya hay en el directorio contenedor de ficheros subidos, y otra para procesar y subir los ficheros seleccionados mediante el formulario. En la primera de ellas tenemos el siguiente código.
function listar($ruta){ if (is_dir($ruta)) { if ($dir = opendir($ruta)) { echo "<p>"; while (($file = readdir($dir)) !== false) { if ($file != "." && $file != "..") { echo "<br>$file - " . filetype($ruta . $file); } } echo "</p>"; closedir($dir); } }else echo "<br>No es ruta valida"; } |
Con esto listaremos todo el contenido de la carpeta destino para tener constancia de que los ficheros procesados son subidos con éxito. Claro está que hay que llamar a la función para que se ejecute.
En la parte de procesamiento de los ficheros tenemos esta parte, que si nos fijamos tenemos en las siguientes líneas un filtro para los elementos «..» y «.» (son el directorio padre y el directorio actual respectivamente), para que no se muestren en el listado.
$count = 0; $exito = 0; if ($_SERVER['REQUEST_METHOD'] == 'POST'){ foreach ($_FILES['files']['name'] as $i => $name) { if (strlen($_FILES['files']['name'][$i]) > 1) { if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'upload/'.$name)) { $count++; $exito = 1; } } } } if ($exito == 1) { echo "<p style='color: green'>Subida con éxito</p>"; } |
Ahora el código completo sería el siguiente:
<html> <head> <title>Subida múltiple de archivos</title> </head> <body> <?php function listar($ruta){ if (is_dir($ruta)) { if ($dir = opendir($ruta)) { echo "<p>"; while (($file = readdir($dir)) !== false) { if ($file != "." && $file != "..") { echo "<br>$file - " . filetype($ruta . $file); } } echo "</p>"; closedir($dir); } }else echo "<br>No es ruta valida"; } $count = 0; $exito = 0; if ($_SERVER['REQUEST_METHOD'] == 'POST'){ foreach ($_FILES['files']['name'] as $i => $name) { if (strlen($_FILES['files']['name'][$i]) > 1) { if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'upload/'.$name)) { $count++; $exito = 1; } } } } if ($exito == 1) { echo "<p style='color: green'>Subida con éxito</p>"; } listar("./upload/"); ?> <form method="post" enctype="multipart/form-data"> <input type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory=""> <input class="button" type="submit" value="Upload" /> </form> </body> </html> |
Imagen | flickr.com
Información Bitacoras.com
Valora en Bitacoras.com: Vuelta al cole y vuelta al trabajo, después de unas cortas vacaciones vuelvo de nuevo con los artículos, que se me han ido acumulando en este tiempo de ausencia (nunca se llega a desconectar del todo). En el primer artícul…
Muchas gracias, Venia buscando y solo encontraba soluciones por medio de Jquery, este funciona perfectamente!!!
Hola que tal, soy nuevo en esto, me anda ok, pero no puedo ver las imágenes hacienod un echo
Me queda asi:
<img style=" height:80px;" src="» alt=»usuario»/>
Que tendría que poner en el echo? Gracias!
No me sale lo que puse en php,,,,,, puse eso en php
echo ‘upload/’.$_FILES[«file»][«name»][$i].’.jpg’;
asdfasdf
Otromas dfsf
La verdad que no sabía que era tan fácil con HTML5, el problema es que sólo me funciona en mi Firefox, en el de algunos clientes no y en el Chrome tampoco, no se si dependerá de que no tengo las últimas actualizaciones o al revés.
¿Hay alguna forma de que funcione en todos o al menos en las últimas versiones?
Gracias.
Donde puedo bajar este codigo.
Saludos Gracias
Como se podría hacer un formulario con datos y varias fotos.
Ejemplo
Nombre:
Direción:
Localidad:
Foto 1:
Foto 2:
Foto 3:
Gracias por su ayuda
Me funciona bien, solo que no puede subir mas de 9 archivos a la vez, no se si me equivoque en algo
muchas gracias por la ayuda, quería consultar si es posible subir los archivos pero a otra ruta ya sea dentro de la misma pc o cualquier pc de mi red. gracias.
Hola excelente codigo.
Solo una duda no me muestra el listado de los Archivos
y no entiendo muy bien lo de los puntos
if ($file != «.» && $file != «..»)
Alguien me puede ayudar porfavor
muchas gracias, me ayudo tu codigo. Felicitaciones.