Inicio » Blog » PHP

Cómo subir una imagen con PHP

Autor: J. Luis, 19 noviembre, 2025

Aprende a subir imágenes a tu página web con PHP en este completo tutorial paso a paso. Descubre cómo procesar y almacenar imágenes de manera segura y efectiva en tu sitio web.

INDICE

1. Paso 1: Crear un Formulario HTML para Subir Imágenes
2. Paso 2: Procesar la Imagen Subida en PHP
3. Paso 3: Almacenar la Imagen en el Servidor con PHP
4. Paso 4: Mostrar la Imagen Cargada en tu Sitio Web
5. Paso 5: Validación y Medidas de Seguridad para Subir Imágenes PHP
6. Paso 6: Crear un Directorio de Archivos Subidos con PHP (Nueva Funcionalidad)
7. Código Completo PHP para Subir Imágenes (Listo para Usar)
Descargar fuente código

¿Estás desarrollando un sitio web y necesitas permitir que los usuarios suban imágenes con PHP de forma segura y eficiente? En el mundo del desarrollo web moderno, esta funcionalidad es indispensable. Desde perfiles de usuario con fotos personalizadas hasta galerías interactivas o e-commerce con productos visuales, aprender a cargar imágenes en servidor PHP te convertirá en un programador más versátil.

En este tutorial PHP para subir imágenes, te guío de manera sencilla, práctica y actualizada al 2025. Cubriremos desde la creación del formulario HTML hasta validaciones de seguridad avanzadas, y ahora agregamos un directorio de archivos para listar y gestionar todas las imágenes subidas. Al final, incluiré el código completo PHP para subir imágenes listo para copiar y pegar. Si buscas cómo guardar imágenes en PHP o integrar con MySQL, ¡sigue leyendo!

Paso 1: Crear un Formulario HTML para Subir Imágenes

El punto de partida para subir archivos con PHP es un formulario HTML intuitivo. Este permite seleccionar y enviar la imagen al servidor. Aquí va un ejemplo básico y optimizado para mejorar la experiencia de usuario (UX):

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subir Imagen con PHP - Tutorial Práctico</title>
</head>
<body>
    <h2>Sube tu Imagen al Servidor PHP</h2>
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <label for="image">Selecciona una imagen (JPEG, PNG o GIF):</label><br>
        <input type="file" id="image" name="image" accept="image/*" required><br><br>
        <input type="submit" value="¡Subir Imagen Ahora!">
    </form>
</body>
</html>

Explicación del código HTML para subir imágenes:

enctype="multipart/form-data": Esencial para manejar archivos binarios como imágenes en PHP. Sin esto, el formulario fallará.
accept="image/*": Restringe la selección a formatos de imagen, evitando errores y mejorando la usabilidad.
required: Obliga al usuario a seleccionar un archivo, reduciendo envíos vacíos.

Guarda este código en un archivo como index.html y enlázalo con tu script PHP. ¡Prueba ya cómo subir fotos con PHP en tu localhost!

Paso 2: Procesar la Imagen Subida en PHP

Una vez enviado el formulario, PHP recibe el archivo vía la superglobal $_FILES. Este array contiene todos los detalles de la imagen cargada. Crea un archivo upload.php y accede a la info básica:

PHP

<?php
if (isset($_FILES["image"]) && $_FILES["image"]["error"] === UPLOAD_ERR_OK) {
    $file = $_FILES["image"];
    $file_name = $file["name"];         // Nombre original (ej: "mi-foto.jpg")
    $file_tmp = $file["tmp_name"];      // Ruta temporal en el servidor
    $file_size = $file["size"];         // Tamaño en bytes
    $file_type = $file["type"];         // Tipo MIME (ej: "image/jpeg")
    $file_error = $file["error"];       // Código de error (0 = éxito)

    echo "Imagen recibida: " . htmlspecialchars($file_name) . " (Tamaño: " . $file_size . " bytes)";
    
    // Aquí validamos y movemos el archivo (ver pasos siguientes)
} else {
    echo "Error: No se ha subido ningún archivo o hay un error en la carga.";
}
?>

Explicación del código PHP para procesar imágenes:

$_FILES["image"]: Accede al campo del formulario. Siempre verifica error === 0 para evitar uploads fallidos.
htmlspecialchars(): Escapa caracteres especiales para prevenir XSS en outputs.
Este paso es el núcleo de cómo procesar uploads PHP; prepara el terreno para almacenamiento seguro.

Paso 3: Almacenar la Imagen en el Servidor con PHP

Ahora, mueve la imagen de la carpeta temporal a un directorio permanente en tu servidor. Usa move_uploaded_file() para una transferencia segura. Continúa en upload.php:

PHP

$upload_dir = "uploads/";  // Carpeta destino (créala con permisos 755/777)
$file_extension = pathinfo($file_name, PATHINFO_EXTENSION);
$new_filename = uniqid() . '.' . $file_extension;  // Nombre único para evitar colisiones
$upload_file = $upload_dir . $new_filename;

if (move_uploaded_file($file_tmp, $upload_file)) {
    echo "¡Éxito! La imagen se ha guardado como: " . $new_filename;
} else {
    echo "Error: No se pudo mover el archivo. Verifica permisos en la carpeta uploads/.";
}
?>

Explicación del código para guardar imágenes PHP:

uniqid(): Genera un ID único (ej: "66f8a123.jpg"), previniendo sobrescrituras.
pathinfo(): Extrae la extensión para mantener el formato original.
Consejo SEO y práctico: Crea la carpeta uploads/ en la raíz de tu proyecto y configúrala con chmod 755 para seguridad. Esto optimiza subir imágenes a servidor web PHP.

Paso 4: Mostrar la Imagen Cargada en tu Sitio Web

¡Haz que el upload sea interactivo! Después de guardar, muestra la imagen con una etiqueta <img> dinámica:

HTML

<?php if (isset($upload_file)): ?>
    <h3>Tu Imagen Subida:</h3>
    <img src="<?php echo htmlspecialchars($upload_file); ?>" alt="Imagen subida con PHP" style="max-width: 500px; height: auto;">
    <p><a href="<?php echo $upload_file; ?>" download>Descargar Imagen</a></p>
<?php endif; ?>

Explicación del código para mostrar uploads PHP:

htmlspecialchars(): Protege contra inyecciones en el src.
alt="...": Mejora SEO al describir la imagen para motores de búsqueda como Google.
Añade un enlace de descarga para retener usuarios. Ideal para galerías de imágenes PHP.

Paso 5: Validación y Medidas de Seguridad para Subir Imágenes PHP

La seguridad es clave en cargas de archivos PHP. Sin validaciones, expones tu sitio a malware o DoS. Integra estas chequeos antes de mover el archivo:

PHP

$allowed_types = ["image/jpeg", "image/png", "image/gif"];
$max_size = 5 * 1024 * 1024;  // 5 MB máximo
$upload_max_size = ini_get('upload_max_filesize');  // Respeta límites de PHP.ini

// Validar tipo MIME
if (!in_array($file_type, $allowed_types)) {
    die("Error: Solo se permiten imágenes JPEG, PNG o GIF.");
}

// Validar tamaño
if ($file_size > $max_size) {
    die("Error: La imagen excede el tamaño máximo de " . ($max_size / 1024 / 1024) . " MB.");
}

// Opcional: Verificar dimensiones con getimagesize()
$image_info = getimagesize($file_tmp);
if (!$image_info || $image_info[0] > 2000 || $image_info[1] > 2000) {  // Máx 2000x2000 px
    die("Error: Imagen inválida o demasiado grande en píxeles.");
}

// Si pasa validaciones, proceder con move_uploaded_file()

Explicación de validaciones PHP para imágenes:

in_array(): Filtra tipos MIME reales, no solo extensiones (más seguro).
getimagesize(): Confirma que es una imagen válida y chequea dimensiones.
Buenas prácticas 2025: Actualiza php.ini con upload_max_filesize = 10M. Para almacenar en MySQL, usa BLOBs o guarda paths en la DB.

Paso 6: Crear un Directorio de Archivos Subidos con PHP (Nueva Funcionalidad)

Para gestionar todas las imágenes cargadas, agrega un directorio de archivos que liste y muestre el contenido de la carpeta uploads/. Esto es perfecto para crear una galería de imágenes PHP dinámica. Crea un nuevo archivo galeria.php o intégralo en upload.php después del upload exitoso.

Ejemplo de código PHP para listar archivos subidos:

PHP

<?php
$upload_dir = "uploads/";  // Misma carpeta de uploads

if (!is_dir($upload_dir)) {
    echo "La carpeta de uploads no existe. Crea la carpeta y sube imágenes primero.";
    exit;
}

$archivos = scandir($upload_dir);  // Escanea el directorio
$imagenes = array();  // Array para solo imágenes

foreach ($archivos as $archivo) {
    if ($archivo != "." && $archivo != ".." && in_array(strtolower(pathinfo($archivo, PATHINFO_EXTENSION)), ['jpg', 'jpeg', 'png', 'gif'])) {
        $imagenes[] = $upload_dir . $archivo;  // Agrega ruta completa
    }
}

if (empty($imagenes)) {
    echo "<p>No hay imágenes subidas aún. <a href='index.html'>Sube una ahora</a>.</p>";
} else {
    echo "<h3>Directorio de Archivos Subidos: " . count($imagenes) . " Imágenes</h3>";
    echo "<div style='display: flex; flex-wrap: wrap; gap: 10px;'>";
    foreach ($imagenes as $imagen) {
        $nombre_archivo = basename($imagen);
        echo "<div style='border: 1px solid #ccc; padding: 10px; text-align: center;'>";
        echo "<img src='" . htmlspecialchars($imagen) . "' alt='Imagen: " . htmlspecialchars($nombre_archivo) . "' style='max-width: 200px; height: auto;'>";
        echo "<p>" . htmlspecialchars($nombre_archivo) . "</p>";
        echo "<a href='" . htmlspecialchars($imagen) . "' download>Descargar</a> | ";
        echo "<a href='?delete=" . urlencode($nombre_archivo) . "' onclick='return confirm(\"¿Eliminar esta imagen?\");'>Eliminar</a>";
        echo "</div>";
    }
    echo "</div>";
}

// Opcional: Eliminar archivo (agrega validación de seguridad)
if (isset($_GET['delete']) && !empty($_GET['delete'])) {
    $archivo_a_eliminar = $upload_dir . basename($_GET['delete']);
    if (file_exists($archivo_a_eliminar) && unlink($archivo_a_eliminar)) {
        echo "<p style='color: green;'>Imagen eliminada exitosamente. <a href='galeria.php'>Recargar Galería</a>.</p>";
    } else {
        echo "<p style='color: red;'>Error al eliminar la imagen.</p>";
    }
}
?>

Explicación del código para directorio de archivos PHP:

scandir(): Lee todos los archivos en la carpeta uploads/, ignorando . y ...
Filtro por extensión: Solo incluye imágenes (jpg, jpeg, png, gif) para mantenerlo enfocado en listar imágenes subidas PHP.
Bucle foreach: Genera una galería responsive con CSS inline (flexbox para móviles).
Enlace de eliminación: Usa unlink() con confirmación JS para borrar archivos. Seguridad extra: Valida que el archivo exista y sea en la carpeta permitida para evitar path traversal.
Consejo SEO: Añade meta tags como <meta name="description" content="Galería de imágenes subidas con PHP - Tutorial 2025"> en el head para optimizar búsquedas como "directorio archivos PHP".

Integra un enlace en upload.php después del éxito: <a href="galeria.php">Ver Directorio de Archivos</a>. ¡Ahora tu tutorial incluye gestión completa de uploads PHP!

Código Completo PHP para Subir Imágenes (Listo para Usar)

Aquí el script PHP completo para upload de imágenes. Combina todos los pasos en upload.php (incluyendo redirección al directorio):

PHP

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["image"])) {
    $file = $_FILES["image"];
    
    if ($file["error"] !== UPLOAD_ERR_OK) {
        die("Error en la subida: " . $file["error"]);
    }
    
    $file_name = $file["name"];
    $file_tmp = $file["tmp_name"];
    $file_size = $file["size"];
    $file_type = $file["type"];
    
    // Validaciones
    $allowed_types = ["image/jpeg", "image/png", "image/gif"];
    $max_size = 5 * 1024 * 1024;
    
    if (!in_array($file_type, $allowed_types)) {
        die("Solo imágenes JPEG, PNG o GIF.");
    }
    if ($file_size > $max_size) {
        die("Imagen demasiado grande (máx 5 MB).");
    }
    
    $image_info = getimagesize($file_tmp);
    if (!$image_info || $image_info[0] > 2000 || $image_info[1] > 2000) {
        die("Imagen inválida o dimensiones excesivas.");
    }
    
    // Almacenamiento
    $upload_dir = "uploads/";
    if (!file_exists($upload_dir)) {
        mkdir($upload_dir, 0755, true);
    }
    
    $file_extension = pathinfo($file_name, PATHINFO_EXTENSION);
    $new_filename = uniqid() . '.' . $file_extension;
    $upload_file = $upload_dir . $new_filename;
    
    if (move_uploaded_file($file_tmp, $upload_file)) {
        echo "<h3>¡Imagen subida exitosamente!</h3>";
        echo '<img src="' . htmlspecialchars($upload_file) . '" alt="Imagen subida" style="max-width: 500px;">';
        echo '<p><a href="' . htmlspecialchars($upload_file) . '" download>Descargar</a></p>';
        echo '<p><a href="galeria.php">Ver Directorio de Archivos Subidos</a></p>';  // Nueva integración
    } else {
        echo "Error al guardar la imagen.";
    }
} else {
    echo "No se recibió ningún archivo.";
}
?>

Cópialo, pruébalo en XAMPP/WAMP y personalízalo. Para subir múltiples imágenes PHP, usa un loop en $_FILES. Con el directorio, ahora tienes una aplicación PHP completa para gestión de imágenes.

Leido 14767 veces | 3 usuarios

Descarga del código fuente