Icono del sitio Códigos de Programación

Subir múltiples archivos o imágenes con PHP

En este tutorial aprenderemos a cargar archivos o imágenes de forma simultanea al servidor con PHP.

Después de subir nuestro vídeo del Capítulo 6 del Curso de PHP y MySQL al canal de Códigos de Programación, donde enseñamos a cargar un archivo o imagen al servidor mediante PHP muchas personas nos preguntaban, ¿Como puedo cargar múltiples archivos?, para lo cual decidimos hacer este post para explicar como podemos realizar esta función.

Requisitos:

Iniciamos creando un formulario en HTML, index.php:

<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Ejemplo Imágenes</title>
		
		<script src="https://code.jquery.com/jquery-3.2.1.min.js" ></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
		
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		
		<style>
			body {
			padding-top: 20px;
			padding-bottom: 20px;
			}
		</style>
	</head>
	
	<body>
		
		<div class="container">		
			<div class="panel panel-primary">
				<div class="panel-body">
					
					<form name="form1" id="form1" method="post" action="guarda.php" enctype="multipart/form-data">
						
						<h4 class="text-center">Cargar Multiple Archivos</h4>
						
						<div class="form-group">
							<label class="col-sm-2 control-label">Archivos</label>
							<div class="col-sm-8">
								<input type="file" class="form-control" id="archivo[]" name="archivo[]" multiple="">
							</div>
							
							<button type="submit" class="btn btn-primary">Cargar</button>
						</div>
						
					</form>
					
				</div>
			</div>
		</div>
	</body>
</html>

Hay algunos aspectos importantes en el formulario que debemos poner atención.

Al elemento form es necesario colocar el atributo enctype=»multipart/form-data», el atributo enctype especifica cómo se deben codificar los datos de formulario al enviarlos al servidor.  Este valor es necesario cuando se utilizan formularios que tienen un control de carga de archivos.

El atributo enctype sólo puede utilizarse para el method post.

El elemento para seleccionar los archivos o imágenes debe ser un input de tipo file y para que se puedan seleccionar varios archivos colocamos la propiedad multiple=»», como seleccionaremos múltiples archivos es necesario que el nombre del elemento sea un arreglo name=»archivo[]».

El resultado del formulario es el siguiente:

Y al presionar el botón para seleccionar archivos abrirá una ventana en la cual podemos buscar los archivos que cargaremos. Para seleccionar múltiples archivos presionamos la tecla Ctrl y hacemos clic en todos los archivos que deseamos seleccionar.

 

Para enviar el formulario presionamos el botón Cargar y este enviara la información al script que indicamos en el atributo action en el elemento form.

guarda.php

<?php
	
	//Como el elemento es un arreglos utilizamos foreach para extraer todos los valores
	foreach($_FILES["archivo"]['tmp_name'] as $key => $tmp_name)
	{
		//Validamos que el archivo exista
		if($_FILES["archivo"]["name"][$key]) {
			$filename = $_FILES["archivo"]["name"][$key]; //Obtenemos el nombre original del archivo
			$source = $_FILES["archivo"]["tmp_name"][$key]; //Obtenemos un nombre temporal del archivo
			
			$directorio = 'docs/'; //Declaramos un  variable con la ruta donde guardaremos los archivos
			
			//Validamos si la ruta de destino existe, en caso de no existir la creamos
			if(!file_exists($directorio)){
				mkdir($directorio, 0777) or die("No se puede crear el directorio de extracci&oacute;n");	
			}
			
			$dir=opendir($directorio); //Abrimos el directorio de destino
			$target_path = $directorio.'/'.$filename; //Indicamos la ruta de destino, así como el nombre del archivo
			
			//Movemos y validamos que el archivo se haya cargado correctamente
			//El primer campo es el origen y el segundo el destino
			if(move_uploaded_file($source, $target_path)) {	
				echo "El archivo $filename se ha almacenado en forma exitosa.<br>";
				} else {	
				echo "Ha ocurrido un error, por favor inténtelo de nuevo.<br>";
			}
			closedir($dir); //Cerramos el directorio de destino
		}
	}
?>

A diferencia en un elemento input de tipo text, el de tipo file no utilizamos $_POST para recuperar el elemento, para este caso utilizamos $_FILES.

El script cargar la los archivo a la carpeta de destino especificada, con los nombres asignados:

 

Ahora puedes complementar tu código con el Capítulo 6 del Curso de PHP y MySQL, agregando validaciones para especificar tipos de archivos permitidos, tamaño máximo de carga, modificar, mostrar y eliminar archivos o imágenes.

Si te ha sido útil el post puedes compartirlo en tus redes sociales.
Déjanos tus comentarios y dudas.
Salir de la versión móvil