¿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.
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.
Aquí podemos comprobar que sólo nos va a permitir seleccionar un fichero por cada subida.
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