Subida múltiple de archivos con PHP y HTML5

upload multipleVuelta 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 &eacute;xito</p>";
    }

Ahora el código completo sería el siguiente:

<html>
<head>
	<title>Subida m&uacute;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 &eacute;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

¿Te ha gustado? Compártelo y Comenta! Puedes darme tu opinión o consultar tus dudas, de esta forma mantendremos la blogosfera viva.

    13 Commentsto Subida múltiple de archivos con PHP y HTML5

    1. 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…

    2. Francisco dice:

      Muchas gracias, Venia buscando y solo encontraba soluciones por medio de Jquery, este funciona perfectamente!!!

    3. fer dice:

      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!

    4. Pablo dice:

      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.

    5. Fidel dice:

      Donde puedo bajar este codigo.
      Saludos Gracias

    6. Fidel dice:

      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

    7. Kendry dice:

      Me funciona bien, solo que no puede subir mas de 9 archivos a la vez, no se si me equivoque en algo

    8. vilmer dice:

      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.

    9. Luis dice:

      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

    10. javier espinosa dice:

      muchas gracias, me ayudo tu codigo. Felicitaciones.

    Deja un comentario

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


    *

    © 2017 Soy Autodidacta | Design Theme by: D5 Creation | Powered by: WordPress