Subir varios ficheros a la vez

Alfredo
Sígueme!
Últimas entradas de Alfredo (ver todo)
Subir varios ficheros php
Subir varios ficheros

¿Subir varios ficheros a la vez con PHP? Vamos a hacerlo de una manera muy sencilla y rápida.

Te explicaremos dos formas de cargar varios archivos con un solo formulario usando HTML, PHP y JavaScript. Los ficheros a cargar pueden ser imágenes, documentos de texto, documentos .pdf, hojas de Excel y/o Audio y video.

¿Se podría subir varios archivos desde un mismo formulario?

Por supuesto que se puede y para ello, te vamos a dar dos soluciones a esta incógnita, y por ello nos decidimos a crear este articulo para despejar tus dudas.

Para ello vamos a despiezar el código por partes:

Elaboramos nuestro formulario

Creamos un nuevo fichero, y vamos a guardarlo como index, la extensión en .php , ya que vamos a ejecutar la acción del formulario en el mismo fichero.

Importante: Si en la etiqueta <form> no utilizamos el atributo enctype=”multipart/form-data”, no vamos a poder subir ficheros.

<form name="MiForm" id="MiForm" method="post" action="index.php" enctype="multipart/form-data">
<input type="submit" name="enviado" value="ENVIAR">
</form>

Para poder subir varios ficheros, he elaborado dos opciones en las que ambas son válidas:

Opción A. Subir varios ficheros en una vez

Esta es la forma más sencilla de subir varios ficheros a la vez. Ya que sólo disponemos de un campo y en la ventana de selección de ficheros podemos seleccionar uno o más ficheros para subirlo a nuestro servidor. Os dejo unos capturas de pantalla para que sea más clara la explicación:

Visualmente este es nuestro formulario, pulsamos a “Elegir archivos”.

Y seleccionamos los ficheros que queremos subir.

Importante: Sólo se puede seleccionar aquellos ficheros que están en la misma carpeta.

subir varios ficheros a la vez con HTML y PHP.

Así quedaría nuestro código HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Cargar varios archivos en PHP</h1>
        <form name="MiForm" id="MiForm" method="post" action="index.php" enctype="multipart/form-data">
            <h4>Cargar Múltiple Archivos</h4>
            <input type="file" id="miarchivo[]" name="miarchivo[]" multiple="">
            <input type="submit" name="enviado" value="ENVIAR">    
        </form>    
    </body>
</html>

Opción B. Subir varios ficheros de uno en uno.

Esta es más compleja que la anterior opción, pero también es sencilla de implementar para subir varios ficheros. La principal diferencia es que vamos a tener que subir los ficheros de uno en uno. La ventaja respecto a la anterior opción es que podemos subir ficheros de diferentes carpetas. Os dejo unos capturas de pantalla para que sea más clara la explicación:

Inicialmente, sólo aparecerá un campo en el que sólo se va a poder subir un fichero. Debajo se implementa otro botón, junto a ENVIAR en el que replica los campos tantas veces como quieras. También podemos eliminar los ficheros o campos que deseamos.

Subir varios ficheros de uno en uno

Aquí podemos comprobar que sólo nos va a permitir seleccionar un fichero por cada subida.

subir varios ficheros seleccionando de uno en uno

Así quedaría nuestro código HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Cargar múltiples archivos PHaP</h1>
        <form name="MiForm" id="MiForm" method="post" action="index.php" enctype="multipart/form-data">
            <h4>Cargar Múltiple Archivos</h4>
            <div id="archivos" style="width:300px">
                <div id="archivo1">
                    <input type="file" name="miarchivo[]">
                </div>
            </div>
            <input type="button" value="+ Subir más ficheros" onclick="anadirArchivo()">        
            <input type="submit" name="enviado" value="ENVIAR">    
        </form>    
    </body>
</html>

Además, tenemos que añadir el siguiente código JavaScript a nuestro código:

//Inicializamos variables a 0.
var contArchivos = 1;

function anadirArchivo() { 
       //Sumamos a la variable el número de archivos.
       contArchivos=contArchivos+1;
       
       //Agregamos el componente de tipo input
       var div = document.createElement("div");
       var input = document.createElement("input");
       var a = document.createElement("a");
       
       //Añadimos los atributos de div
       div.id ='archivo'+contArchivos;
       
       //Añadimos los atributos de input
       input.type = 'file';
       input.name = 'miarchivo[]';
       
       //Añadimos los atributos del enlace a eliminar
        a.href = "#";
        a.id = 'archivo'+contArchivos;
        a.onclick = function() {
            borrarArchivo(a.id);
        }
        a.text ="X Eliminar archivo";
       
       //Agreamos el input y enlace en el div
       document.getElementById("archivos").appendChild(div);    
       document.getElementById(a.id).appendChild(input);          
       document.getElementById(a.id).appendChild(a);    
}

function borrarArchivo(id){
    //Restamos el número de archivos
    contArchivos=contArchivos-1;
    
    var archivo = document.getElementById(id);    
    // Si existe el campo a eliminar...
    if (archivo){
        divPadre = archivo.parentNode;
        divPadre.removeChild(archivo);
    }
}

Subimos los ficheros al servidor

<?php
    //Si hemos pulsado a enviar
    if($_POST['enviado']){
        //Si hay archivos a subir
        if($_FILES["archivo"]){
            //Recorre el array de los archivos a subir
            foreach($_FILES["archivo"]['tmp_name'] as $key => $tmp_name){
                //Si el archivo existe
                if($_FILES["archivo"]["name"][$key]){
                    // Nombres de archivos de temporales
                    $archivonombre = $_FILES["archivo"]["name"][$key]; 
                    $fuente = $_FILES["archivo"]["tmp_name"][$key]; 
                    
                    $carpeta = 'archivos/'; //Carpeta donde guardamos los archivos
                    
                    //Si no existe la carpeta
                    if(!file_exists($carpeta)){
                        //Se crea o se genera un error.
                        mkdir($carpeta, 0777) or die("Hubo un error al crear la carpeta");    
                    }
                    
                    //Abrimos la conexion con la carpeta destino
                    $dir=opendir($carpeta);
                    
                    //Verificamos si el archivo se ha subido
                    if(move_uploaded_file($fuente, $carpeta.'/'.$archivonombre)){    
                        echo "El archivo $archivonombre se ha cargado de forma correcta.<br>";
                    }else{    
                        echo "Se ha producido un error, intentelo de nuevo.<br>";
                    }
                    //Cerramos la conexion con la carpeta destino
                    closedir($dir); 
                }
            }
        }
    }
?>

Fichero completo (index.php)

<?php
    //Si hemos pulsado a enviar
    if($_POST['enviado']){
        //Si hay archivos a subir
        if($_FILES["miarchivo"]){
            //Recorre el array de los archivos a subir
            foreach($_FILES["miarchivo"]['tmp_name'] as $key => $tmp_name){
                //Si el archivo existe
                if($_FILES["miarchivo"]["name"][$key]){
                    // Nombres de archivos de temporales
                    $archivonombre = $_FILES["miarchivo"]["name"][$key]; 
                    $fuente = $_FILES["miarchivo"]["tmp_name"][$key]; 
                    
                    $carpeta = 'archivos/'; //Carpeta donde guardamos los archivos
                    
                    //Si no existe la carpeta
                    if(!file_exists($carpeta)){
                        //Se crea o se genera un error.
                        mkdir($carpeta, 0777) or die("Hubo un error al crear la carpeta");    
                    }
                    
                    //Abrimos la conexion con la carpeta destino
                    $dir=opendir($carpeta);
                    
                    //Verificamos si el archivo se ha subido
                    if(move_uploaded_file($fuente, $carpeta.'/'.$archivonombre)){    
                        echo "El archivo $archivonombre se ha cargado de forma correcta.<br>";
                    }else{    
                        echo "Se ha producido un error, intentelo de nuevo.<br>";
                    }
                    //Cerramos la conexion con la carpeta destino
                    closedir($dir); 
                }
            }
        }
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Cargar múltiples archivos PHaP</h1>
        <form name="MiForm" id="MiForm" method="post" action="index.php" enctype="multipart/form-data">
            <h4>Cargar Múltiple Archivos</h4>
            <!-- Opción A -->
            <input type="file" id="miarchivo[]" name="miarchivo[]" multiple="">
            <!-- Opción B -->
            <div id="archivos" style="width:300px">
                <div id="archivo1">
                    <input type="file" name="miarchivo[]">
                </div>
            </div>
            <input type="button" value="+ Subir más ficheros" onclick="anadirArchivo()">        
            <input type="submit" name="enviado" value="ENVIAR">    
        </form>        
        <script>
            // Sólo para Opción B
            //Inicializamos variables a 0.
            var contArchivos = 1;
            
            function anadirArchivo() { 
                   //Sumamos a la variable el número de archivos.
                   contArchivos=contArchivos+1;
                   
                   //Agregamos el componente de tipo input
                   var div = document.createElement("div");
                   var input = document.createElement("input");
                   var a = document.createElement("a");
                   
                   //Añadimos los atributos de div
                   div.id ='archivo'+contArchivos;
                   
                   //Añadimos los atributos de input
                   input.type = 'file';
                   input.name = 'miarchivo[]';
                   
                   //Añadimos los atributos del enlace a eliminar
                    a.href = "#";
                    a.id = 'archivo'+contArchivos;
                    a.onclick = function() {
                        borrarArchivo(a.id);
                    }
                    a.text ="X Eliminar archivo";
                   
                   //Agreamos el input y enlace en el div
                   document.getElementById("archivos").appendChild(div);    
                   document.getElementById(a.id).appendChild(input);          
                   document.getElementById(a.id).appendChild(a);    
            }

            function borrarArchivo(id){
                //Restamos el número de archivos
                contArchivos=contArchivos-1;
                
                var archivo = document.getElementById(id);    
                // Si existe el campo a eliminar...
                if (archivo){
                    divPadre = archivo.parentNode;
                    divPadre.removeChild(archivo);
                }
            }
        </script>
    </body>
</html>

Te recomendamos que veas más ejemplos útiles sobre HTML, PHP y JavaScript.

El código que hemos utilizado para subir varios ficheros, ha sido modificado y mejorado a raíz del siguiente post

Alfredo

Desarrollador web de profesión (.NET, jQuery, JavaScript y SQL Server). Amante del fútbol y los videojuegos. Escribo en este blog sobre temas de programación que me parecen interesantes y que quiero compartir con todo el mundo.

También te podría gustar...

Deja una respuesta

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

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies
A %d blogueros les gusta esto: