Saltar al contenido
PHP

Subir varios ficheros a la vez

Subir varios ficheros php

¿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».

Subir varios ficheros a la vez 2

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 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>

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