Guardando imágenes en el servidor

Comparto código con algunas validaciones mencionadas por el buen RetaxMaster.

<?php

$basename = $_FILES["image"]["name"];
$image = $_FILES["image"]["tmp_name"];
$ruta_a_subir = "images/$basename";
$tipo_archivo = $_FILES["image"]["type"];
$error_de_carga = $_FILES["image"]["error"];
$partes_archivo = explode(".",$basename);
$extension_archivo=strtolower(end($partes_archivo));
$extensiones_permitidas=["jpg","png","svg","ico"];
/*
echo "<pre>";
var_dump($_FILES);
var_dump($extension_archivo);
echo "</pre>";
*/

//Validamos si hubo algun error al cargar el archivo
if ($error_de_carga == UPLOAD_ERR_OK)
{
    //Validamos que sea un tipo de archivo permitido
    if (in_array($extension_archivo,$extensiones_permitidas))
    {
        //Copiamos la imagen a la carpeta del servidor
        if (move_uploaded_file($image, $ruta_a_subir)){
            $mensaje = "Imagen subida correctamente";
        }else{
            $mensaje= "Huston tuvimos un problema - Verifica que tengas permisos para manipular el servidor ";
        }
    }else{
        $mensaje = "Huston tuvimos un problema - Extensión no valida <br>
                    Extensiones validas (".implode(',', $extensiones_permitidas).")";
    }
}else{
    $mensaje="¡Ups! algo salio mal - $error_de_carga";
}

?>

<!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>Document</title>
</head>
<body>
    
    <h2><?= $mensaje ?></h2>
    <img src="<?= $ruta_a_subir ?>" alt="<?= $basename ?>">

</body>
</html>

RubenSH

No hay caso. No me funciona. No me mueve la imagen a la carpeta y ni siquiera se si la imagen está en esa carpeta temporal ya que tampoco la puedo encontrar :Sweat

Eduardo Reyes

😎 Yo aprendiendo a subir archivos desde el Frontend y guardarlos en el Backend.

Juan David Rueda Quiroga

Guardar los archivos directamente en el servidor desde el formulario nos deja expuesto a un hackeo https://book.hacktricks.xyz/pentesting-web/file-upload

La solución sería usar servicios como Amazon S3 o Azure Storage, la otra sería guardarlo en una ruta en la que no podamos acceder directamente al archivo, a toda costa debemos evitar la carpeta pública

Henry

podemos usar la función getimagesize para validar si lo que se envía es una imagen y no otro tipo de archivo, así evitamos que envíen pdf’s o otro tipo de archivos que no se deberían poder enviar.

Luis Alberto Aguilar Muñoz

Pasa saber si el archivo ya existe podemos usar la funcion file_exists https://www.php.net/manual/es/function.file-exists.php

if (file_exists($ruta_subir)){
        echo "El archivo ya existe";
    }else{
        move_uploaded_file($file, $ruta_subir);
    }

jlunarubio

Cuando se envian archivos al servidor, PHP lo almacenara de forma temporal en un directorio, por lo que es importante que este lo guardemos en una carpeta, de lo contrario este archivo sera eliminado, para esto lo hacemos con la funcion

<?php 
move_uploaded_file($nombreTemporal, $rutaConFileName)
?>

Maricielo Anchahua Flores

hace un mes

````js { "Debug with pre and var_dump": { "prefix": "pre", "body": [ "echo \"

\";",
      "var_dump(${1:});",
      "echo \"

\";" ], "description": "Echo preformatted var_dump for debugging" } } ```{ "Debug with pre and var\_dump": { "prefix": "pre", "body": \[ "echo \\"\

\\";",      "var\_dump(${1:});",      "echo \\"\

\\";" ], "description": "Echo preformatted var\_dump for debugging" }} ````

Maricielo Anchahua Flores

hace un mes

snippets 1. control + shift + p 2. buscar snippets 3. codigo `{ "Debug with pre and var_dump": { "prefix": "pre", "body": [ "echo \"

\";",      "var_dump(${1:});",      "echo \"

\";" ], "description": "Echo preformatted var_dump for debugging" }}`

Isaí Sánchez Jiménez

hace 8 meses

Para que no se vuelva a enviar un form y salga esa ventanita de warning debemos hacer uso del POST/ redirect/ GET pattern. Pueden googlearlo :) <https://en.wikipedia.org/wiki/Post/Redirect/Get#:~:text=Post%2FRedirect%2FGet%20(PRG>,problem%20encountered%20in%20user%20agents.

Isaí Sánchez Jiménez

hace 8 meses

Para que no se vuelva a enviar un form y salga esa ventanita de warning debemos hacer uso del POST/ redirect/ GET pattern. Pueden googlearlo :)

Rubén Téllez Gerardo

hace 9 meses

Auxilio, PHP no puede crear el archivo temporal, aunque no arroja error al respecto. Simplemente es incapaz de crear el archivo temporal y por tanto no puede moverlo.

Jonathan Amaya Mendieta

Lo ideal para cuando manejemos un sistema que permita subir imagenes o archivos, es dar un nombre temporal ya que vemos que si existe un archivo que se llame igual lo sobreescribira. Un consejo que me dieron y lo aplico siempre en mis desarrollos es: **Nunca confies en tus usuarios** Basicamemte hagamos las validaciones que sean necesarias dentro de la aplicación. Para un futuro, las imágenes nunca se guardan en la BD, se guarda solo el nombre que las identifique y el archivo en el servidor.

LUIS MIGUEL OLARTE BELLO

Estoy muy contento porque he aprendido demasiado, muchas gracias RetaxMaster

Jose Alejandro Pantoja Giraldo

php es hermoso y NO ESTA MUERTO

Walter Omar Barrios Vazquez

formulario.php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Envío de Imágenes</title>
</head>
<body>
    <form action="server.php" method="post" enctype="multipart/form-data">
        <label>Nombre: <input type="text" name="nombre"></label>
        <label>Imagen: <input type="file" name="image"></label>
        <button type="submit">Mandar formulario</button>
    </form>
</body>
</html>

server.php

<?php

$basename = $_FILES["image"]["name"];
$image = $_FILES["image"]["tmp_name"];
$ruta_a_subir = "images/$basename";

move_uploaded_file($image, $ruta_a_subir);

Leonardo Jiménez Ubaque

Guardando imágenes en el servidor

Para guardar imágenes en el servidor utilizando PHP, debes seguir estos pasos:

Crear un formulario HTML para cargar la imagen

Crea un formulario en HTML que permita a los usuarios seleccionar y cargar imágenes. Asegúrate de configurar el atributo enctype del formulario como "multipart/form-data" para permitir la carga de archivos.

<form action="procesar.php" method="post" enctype="multipart/form-data">
    <input type="file" name="imagen">
    <input type="submit" value="Subir imagen">
</form>

Procesar la imagen en PHP

Crea un archivo PHP (por ejemplo, procesar.php) para manejar la imagen cargada. Utiliza la variable superglobal $_FILES para acceder a los detalles de la imagen y luego guárdala en el servidor.

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['imagen']) && $_FILES['imagen']['error'] === UPLOAD_ERR_OK) {
        $nombreArchivo = $_FILES['imagen']['name'];
        $rutaTemporal = $_FILES['imagen']['tmp_name'];

        // Ruta donde se guardará la imagen en el servidor
        $rutaDestino = 'carpeta_destino/' . $nombreArchivo;

        // Mover la imagen temporal a la ubicación deseada en el servidor
        if (move_uploaded_file($rutaTemporal, $rutaDestino)) {
            echo "Imagen subida con éxito: $nombreArchivo";
        } else {
            echo "Error al subir la imagen.";
        }
    } else {
        echo "Ocurrió un error al cargar la imagen.";
    }
} else {
    echo "Esta página solo acepta solicitudes POST.";
}
?>

Crear una carpeta para almacenar las imágenes

Crea una carpeta en tu servidor donde deseas almacenar las imágenes. En el ejemplo anterior, se usa 'carpeta_destino/', asegúrate de ajustar esto según tus necesidades.

Asegurarse de que el servidor tenga permisos de escritura

Asegúrate de que la carpeta donde deseas guardar las imágenes tenga los permisos de escritura adecuados para que PHP pueda mover las imágenes cargadas a esa ubicación.

Sanitizar y validar la imagen (opcional pero importante)

Antes de guardar la imagen, asegúrate de que sea un archivo de imagen válido y que cumpla con tus criterios de seguridad. Esto puede incluir verificar el tipo MIME de la imagen, su tamaño, y realizar otras validaciones para prevenir posibles problemas de seguridad.

Mostrar imágenes almacenadas

Una vez que las imágenes están almacenadas en el servidor, puedes mostrarlas en tus páginas web utilizando la etiqueta <img> y proporcionando la ruta adecuada.

Recuerda siempre tomar medidas de seguridad adecuadas al manejar archivos cargados por usuarios para evitar problemas de seguridad como ataques de inyección de código o la ejecución de scripts maliciosos.

Mi código para la clase:

Formulario en HTML

<!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>Formulario con envío de imágenes y guardado en el servidor</title>
</head>
<body>
    <!-- Formulario -->
    <form action="server.php" method="post" enctype="multipart/form-data">
        <!-- Nombre -->
        <label for="nombre">Nombre:</label>
        <input type="text" name="nombre" id="nombre" placeholder="Nombre"><br>
        <!-- Apellido -->
        <label for="apellido">Apellido:</label>
        <input type="text" name="apellido" id="apellido" placeholder="Apellido"><br>
        <!-- Edad -->
        <label for="edad">Edad:</label>
        <input type="number" name="edad" id="edad" placeholder="Edad"><br>
        <!-- Imagen -->
        <label for="edad">Imagen:</label>
        <input type="file" name="imagen" id="imagen"><br>
        <!-- Envio -->
        <input type="submit" value="Enviar">
    </form>
</body>
</html>

Servidor PHP

<?php

// Truco para debugear y ver lo que llega por POST
echo "<pre>";
var_dump($_FILES); // Recupera la información que se envía por FILES
echo "</pre>";

// Recuperamos los datos del formulario
$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
$edad = $_POST['edad'];

// Recuperamos los datos de la imagen
$nombreImagen = $_FILES['imagen']['name']; // Recuperamos el nombre de la imagen
$tipoArchivo = $_FILES['imagen']['type']; // Recuperamos el tipo de archivo
$tmpImagen = $_FILES['imagen']['tmp_name']; // Recuperamos el nombre temporal de la imagen

// Definir la ruta de almacenamiento de las imágenes
$rutaAlmacenamiento = "imagenes/$nombreImagen";

// Guardamos la imagen en el servidor cambiando su ubicacion temporal a la ruta de almacenamiento
move_uploaded_file($tmpImagen, $rutaAlmacenamiento);

// Mostramos los datos
echo "Hola $nombre $apellido, tienes $edad años, tu imagen es $nombreImagen";

?>

<!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>Guardado de imagen en servidor</title>
</head>
<body>
    <!-- Mostrar la imagen Guardada -->
    <h1>Imagen guardada en el servidor</h1>
    <img src="<?= $rutaAlmacenamiento ?>" alt="<?= $nombreImagen ?>">
</body>
</html>

Juan Omar Palma álvarez

![](

Juan Omar Palma álvarez

si a alguien les da problemas para guardar la imagen y para mostrarla en la pagina, es porque no tienen los permisos necesarios para ejecutar los programas, vayan a la carpeta subiendo imagenes y denle todos los permisos de lectura escritura y ejecución y así si se puede guardar.

Juan Omar Palma álvarez

esto me crea una carpeta imagenes y me guarda el archivo en ella, hay que condicionarla a que si la carpeta ya existe, que se salte el paso pero si funciona

$basename = $_FILES["image"]["name"];
$image = $_FILES["image"]["tmp_name"];
mkdir("imagenes");
$ruta_a_subir = "imagenes/$basename";
move_uploaded_file($image, $ruta_a_subir);

Joel Dominguez Merino