Subir múltiples imágenes en PHP

Olorunfemi Akinlua 15 febrero 2024
  1. Comprender la acción del formulario y $_FILES para cargas de archivos múltiples en PHP
  2. Use move_uploaded_file() para cargar múltiples imágenes en PHP
Subir múltiples imágenes en PHP

Dentro de nuestras aplicaciones PHP, especialmente las aplicaciones basadas en el usuario, de vez en cuando, es posible que necesitemos cargar varios archivos a la vez. Y con las funciones de PHP y las capacidades de HTML, es muy posible y fácil de hacer.

Para hacerlo posible, necesitamos especificar la acción del formulario dentro de nuestro archivo o sección HTML dependiendo de cómo estructure su base de código y luego use las funciones integradas para procesar la acción.

En este artículo, aprenderemos cómo cargar varias imágenes en PHP, lo que nos brinda contexto para especificar los archivos que queremos de una entrada de formulario, procesar todos los archivos seleccionados por el usuario y cargar o mover a la ubicación requerida.

Comprender la acción del formulario y $_FILES para cargas de archivos múltiples en PHP

Cuando un usuario ingresa cualquier entrada en un formulario HTML, usamos el método POST para enviar cualquier entrada (desde texto a archivos) al lado del servidor donde reside nuestra aplicación PHP.

<form method='post' action='' enctype='multipart/form-data'>

La parte enctype='multipart/form-data' especifica cómo se codificarán los datos del formulario y se requiere cuando empleamos la carga de archivos dentro de nuestro formulario.

Para cargar un archivo, necesitamos el tipo de entrada archivo y un nombre específico (podría ser cualquier nombre que decida), archivo.

<input type="file" name="file" id="file">

Para la carga de archivos múltiples, todavía necesitamos el tipo de entrada archivo, pero ahora un nombre especificado diferente, archivo[], y un atributo agregado, múltiple. La adición de [] indica que el campo de entrada puede procesar más de un archivo.

<input type="file" name="files[]" multiple/>

En el lado del servidor, la variable global, $_FILES, es una matriz asociativa que contiene archivos cargados a través del método HTTP POST, lo que nos permite procesar el archivo de manera adecuada.

<?php

$_FILES["files"]

Use move_uploaded_file() para cargar múltiples imágenes en PHP

Ahora que entendemos los conceptos básicos, necesitamos cargar varios archivos. Vamos a crear el formulario PHP para cargar varias imágenes.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Multiple Image Upload</title>
</head>

<body>
	<form method="post" enctype="multipart/form-data" name="formUploadFile">
		<label>Select image(s) to upload:</label>
		<input type="file" name="files[]" multiple="multiple" />
		<input type="submit" value="Upload File" name="imgSubmit" />
	</form>
	<?php
	if (isset($_POST["imgSubmit"])) {
		$errors = [];
		$uploadedFiles = [];
		$extension = array("jpeg", "jpg", "png");
		$UploadFolder = "images";

		$counter = 0;

		foreach ($_FILES["files"]["tmp_name"] as $key => $tmp_name) {
			$temp = $_FILES["files"]["tmp_name"][$key];
			$name = $_FILES["files"]["name"][$key];

			if (empty($temp)) {
				break;
			}

			$counter++;
			$UploadOk = true;

			$ext = pathinfo($name, PATHINFO_EXTENSION);
			if (in_array($ext, $extension) == false) {
				$UploadOk = false;
				array_push($errors, $name . " isn't an image.");
			}

			if ($UploadOk == true) {
				move_uploaded_file($temp, $UploadFolder . "/" . $name);
				array_push($uploadedFiles, $name);
			}
		}

		if ($counter > 0) {
			if (count($errors) > 0) {
				echo "<b>Errors:</b>";
				echo "<br/><ul>";
				foreach ($errors as $error) {
					echo "<li>" . $error . "</li>";
				}
				echo "</ul><br/>";
			}

			if (count($uploadedFiles) > 0) {
				echo "<b>Uploaded Files:</b>";
				echo "<br/><ul>";
				foreach ($uploadedFiles as $fileName) {
					echo "<li>" . $fileName . "</li>";
				}
				echo "</ul><br/>";

				echo count($uploadedFiles) . " iamge(s) are successfully uploaded.";
			}
		} else {
			echo "Please, Select image(s) to upload.";
		}
	}
	?>
</body>

</html>

Verifique si la variable $_POST[] está configurada usando la función isset(), inicie las variables importantes y configure las extensiones que necesitamos para la carga del archivo.

if (isset($_POST["imgSubmit"])) {
		$errors = [];
		$uploadedFiles = [];
		$extension = array("jpeg", "jpg", "png");
		$UploadFolder = "images";

Después, recorremos las múltiples imágenes que han sido procesadas a través de la variable $_FILES[] y luego verificamos la extensión usando pathinfo() y si es true, movemos las imágenes a la carpeta especificada, $UploadFolder usando la función move_uploaded_file() y empuje el nombre de las imágenes a la variable $uploadedFiles.

foreach ($_FILES["files"]["tmp_name"] as $key => $tmp_name) {
			$temp = $_FILES["files"]["tmp_name"][$key];
			$name = $_FILES["files"]["name"][$key];

			if (empty($temp)) {
				break;
			}

			$counter++;
			$UploadOk = true;

			$ext = pathinfo($name, PATHINFO_EXTENSION);
			if (in_array($ext, $extension) == false) {
				$UploadOk = false;
				array_push($errors, $name . " isn't an image.");
			}

			if ($UploadOk == true) {
				move_uploaded_file($temp, $UploadFolder . "/" . $name);
				array_push($uploadedFiles, $name);
			}
		}

Finalmente, mostramos los errores y archivos subidos que existen.

if ($counter > 0) {
			if (count($errors) > 0) {
				echo "<b>Errors:</b>";
				echo "<br/><ul>";
				foreach ($errors as $error) {
					echo "<li>" . $error . "</li>";
				}
				echo "</ul><br/>";
			}

			if (count($uploadedFiles) > 0) {
				echo "<b>Uploaded Files:</b>";
				echo "<br/><ul>";
				foreach ($uploadedFiles as $fileName) {
					echo "<li>" . $fileName . "</li>";
				}
				echo "</ul><br/>";

				echo count($uploadedFiles) . " image(s) are successfully uploaded.";
			}
		} else {
			echo "Please, Select image(s) to upload.";
		}

El archivo PHP servido al navegador.

archivo PHP servido al navegador

Seleccione las imágenes y cargue las imágenes.

Selección de imágenes para cargar

Luego, muestra los archivos cargados.

mostrar archivos cargados

Las imágenes subidas:

imágenes cargadas

Si selecciona un archivo que no es una imagen, da los errores.

error

Olorunfemi Akinlua avatar Olorunfemi Akinlua avatar

Olorunfemi is a lover of technology and computers. In addition, I write technology and coding content for developers and hobbyists. When not working, I learn to design, among other things.

LinkedIn

Artículo relacionado - PHP Upload