No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de PHP: Integraci贸n con HTML

Curso de PHP: Integraci贸n con HTML

Carlos Eduardo G贸mez Garc铆a

Carlos Eduardo G贸mez Garc铆a

Guardando im谩genes en el servidor

14/24
Recursos

Aportes 17

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Si est谩n en Linux y les da un error de permisos
Para cambiar los permisos. En /var/www
sudo chown -R www-data:${USER} html
Entonces, tanto Apache como el usuario podr谩n 鈥渏ugar鈥 con archivos

Fuente

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>

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

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

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鈥檚 o otro tipo de archivos que no se deber铆an poder enviar.

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

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);
    }

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)
?>
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.
Estoy muy contento porque he aprendido demasiado, muchas gracias RetaxMaster
php es hermoso y NO ESTA MUERTO

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);

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>

![](

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.

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);

Se me ocurre que para la foto de perfil, guardar en la BD la ruta de la imagen y as铆 cuando el usuario inicie sesi贸n, poder recuperar desde la BD, la ruta de su imagen.
La pregunta es, 驴En donde guardar las im谩genes para ese caso de uso? En el servidor igual?
Comparto mi apunte de la clase de hoy, a帽ad铆 la validaci贸n de si ya existe el archivo en la carpeta, no lo sobrescriba 馃槣

Index

<!DOCTYPE html>
<html lang="es">
<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>iJCode - Guardando imagenes en el Servidor</title>
</head>
<body>
  <!-- Creando Formulario -->
  <!-- Cambiando la encriptaci贸n del formulario para el env铆o de im谩genes -->
  <form action="./server.php" method="post" enctype="multipart/form-data">
    <label for="name">Ingresa el nombre</label>
    <input type="text" name="name" id="name">

    <label for="image">Selecciona la im谩gen</label>
    <input type="file" name="image" id="image">
    
    <button type="submit">Enviar Formulario</button>
  </form>
</body>
</html>

Server

<?php
// Obteniendo la informaci贸n mandada
$name = (isset($_POST['name'])) ? $_POST['name']: 'Sin nombre';

echo("<b>El nombre es: </b>");
echo($name);


echo("<br><b>Los datos de la im谩gen son:</b>");
echo("<pre>");

var_dump($_FILES);

echo("</pre>");


// Obteniendo la imagen de la carpeta temporal y guardandola en una carpeta dentro del proyecto
$imageTemporal = $_FILES['image']['tmp_name'];
$baseName = $_FILES['image']['name'];
$path = "./images/$baseName";

// Se comprueba, si no existe la imagen en la ruta, se mueve la imagen de la carpeta temporal a la carpeta 'images' dentro del proyecto
if(!(file_exists($path))){
  move_uploaded_file($imageTemporal, $path);
}
?>

<!-- Mostrar la imagen -->
<!DOCTYPE html>
<html lang="es">
<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>iJCode - Imagen guardada</title>
</head>
<body>
  <h1>La im谩gen guardada es</h1>
  <img src="<?= $path ?>" alt="<?= $basename ?>" width="300"/>
</body>
</html>

Resultado