Envío de imágenes

Clase 13 de 24 • Curso de PHP: Integración con HTML

Leslie

student•

Hola, con la intencion de tener un codigo mas limpio y legible hice una funcion para usar var_dump y ver el contenido de una variable, espero les sirva

function debugger($variable)
{
        echo "<pre>";
        var_dump($variable);
        echo "</pre>";
}

luego el uso solo es debugger($_FILES) por ejemplo

Carlos Andrés Aristizabal

student•

¡Súper bueno el aporte! Te cuento que todavía la podrías mejorar incluso más adicionando luego del último echo la función integrada die() , esta función interrumpe la ejecución del código para que puedas hacer un mejor debug. La implementación que lograrías ya existe en el framework Laravel y se conoce como dd() o dump and die.

function dd($variable) {
	echo "<pre>";
        var_dump($variable);
        echo "</pre>";
	die();
}

Raymundo Lara Garcia

student•

Increíble aporte, gracias! Tambien puedes hacerlo snippet si usas VS code:

Abre la paleta de comandos (CTRL + SHIFT + P)
Escribe "snippets" y pulsa ENTER
Escribe PHP y pulsa ENTER
Te abrirá un archivo JSON, pega el siguiente código al final de los comentarios:

"Debugger":{
		"prefix": "debugger",
		"body": [
			"echo \"<pre>\";",
      "print_r($1);",
      "echo \"</pre>\";"
		],
		"description": "Create a debugger structure"
	}

Guarda los cambios y ejecuta tu snippet en tu archivo php usando el valor de "prefix", en este caso "debugger"
Y como por arte de magia se escribirá todo el código y aparecerá el cursor donde indica "$1" para que escribas tu arreglo a debuggear
Puedes usar este truco para crear snippets de bloques de código que usas muy seguido

Juan Camilo Figueroa Sierra

student•

justo necesitaba hacer una app web para subir documentos, Gracielas.

Cristobal Nyram

student•

Joel Dominguez Merino

student•

Muy interesante como poder enviar archivos o imágenes desde el HTML al Servidor. Ahora, importante saber como guardar esa imagen antes de que sea eliminada de la carpeta temporal. Comparto mi apunte de la clase:

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 - Envío de imágenes</title>
</head>
<body>
  <!-- Creación de formulario -->
  <!-- Se debe cambiar el tipo de encriptación para el envío de imágenes -->
  <form action="./server.php" method="POST" enctype="multipart/form-data">
  <label for="name">Nombre de la imágen: </label>
  <input type="text" name="name" id="name">
  <br/>
  <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
// Se obtienen los datos almacenados en las variables globales '$_POST' y '$_FILES'

// Se imprime lo que se mando por el método POST
print_r("<b>¿Qué contiene POST?</b>");
echo("<pre>");

  var_dump($_POST);
  /*
    Ejemplo de salida:
      array(1) {
        ["name"]=>
        string(4) "Joel"
      }
  */

echo("</pre>");

// Se obtiene el nombre
$nombre = (isset($_POST['name'])) ? $_POST['name'] : 'Sin nombre';

// Impresión de la variable $nombre
print_r("<b>Nombre</b>");
echo("<pre>");

  var_dump("Nombre: $nombre"); // string(12) "Nombre: Joel"

echo("</pre>");

// Impresión de la variable global $_FILES
print_r("<b>Imagen</b>");
echo("<pre>");

  var_dump($_FILES );
  /*
    Ejemplo de salida:
      array(1) {
        ["image"]=>
          array(5) {
          ["name"]=>
          string(9) "fondo.jpg"
          ["type"]=>
          string(10) "image/jpeg"
          ["tmp_name"]=>
          string(24) "C:\xampp\tmp\phpBC2E.tmp"
          ["error"]=>
          int(0)
          ["size"]=>
          int(1426311)
        }
      }
  */
  var_dump($_FILES['image']['type']); // string(10) "image/jpeg"

echo("</pre>");

Resultado

Juan David Rueda Quiroga

student•

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

Santiago Velásquez Serna

student•

Para que el cuadro de dialogo solo muestre imagenes en las opciiones, podemos agregar a la etiqueta img el atributo: accept="image/*"

José Luis Luna Rubio

student•

Otra de las super variables globales de PHP es

<?php 
$_FILES;
?>

Cuando subimos un archivo mediante un formulario toda la data sera almacenada en dicha variable de PHP, es importante mencionar que para poder subir archivos en el formulario se debera de colocar el enctype="multipart/form-data", de lo contrario no podremos trabajar con archivos en el formulario.

Jose Alejandro Pantoja Giraldo

student•

a ratos las cosas son solo de debuguear, verdad de dios que si jajaja xD

LESTHER XITUMUL MANUEL

student•

Configurar tus propios snippets de código en Visual Studio Code

Press CTRL + SHIFT + P
Write Snippets
Write the programming language’s name. It can be php in this case, then, press ENTER
The previous step is gonna open a JSON file, here you can configure your snippets.

"PHP Debugger":{
		"prefix": "phpdebug",
		"body": [
			"echo \"<pre>\";",
			"var_dump($$1);",
			"echo \"</pre>\";"
		],
		"description": "Create a debugger structure"
	}

El snippet de PHP proporcionado se llama "PHP Debugger" y tiene las siguientes propiedades:

prefix: El prefijo es el texto que debes escribir en tu editor de código para activar el snippet.
body: El cuerpo del snippet contiene el código que se insertará cuando se active el snippet. En este caso, el código imprimirá en el navegador el contenido de una variable utilizando la función var_dump y lo envolverá en etiquetas HTML <pre> para una mejor visualización.
description: La descripción es una breve explicación del propósito del snippet. En este caso, el propósito es crear una estructura de depuración para imprimir variables en PHP.

LESTHER XITUMUL MANUEL

student•

Envío de archivos al servidor con PHP y HTML

Para enviar archivos al servidor utilizando PHP y HTML, se utiliza el atributo enctype del elemento <form> con el valor "multipart/form-data". Además, se utiliza el input type "file" para permitir a los usuarios seleccionar y enviar archivos.

Aquí tienes un ejemplo práctico de cómo enviar un archivo al servidor utilizando PHP y HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enviar archivo al servidor</title>
</head>
<body>
    <h2>Enviar archivo al servidor</h2>
    <form action="procesar.php" method="POST" enctype="multipart/form-data">
        <input type="file" name="archivo">
        <button type="submit">Enviar</button>
    </form>
</body>
</html>

En el ejemplo anterior, se crea un formulario con un campo de entrada de tipo "file" y se especifica el atributo enctype con el valor "multipart/form-data". Cuando el usuario selecciona un archivo y envía el formulario, el archivo se enviará al servidor.

En el script PHP que procesa el formulario (procesar.php en este caso), se puede acceder al archivo enviado utilizando la superglobal $_FILES. Por ejemplo:

<?php
if(isset($_FILES['archivo'])) {
    $nombreArchivo = $_FILES['archivo']['name'];
    $tipoArchivo = $_FILES['archivo']['type'];
    $tamanoArchivo = $_FILES['archivo']['size'];
    $ubicacionTemporal = $_FILES['archivo']['tmp_name'];
    $errorArchivo = $_FILES['archivo']['error'];

    // Aquí puedes realizar acciones con el archivo, como guardarlo en una ubicación específica o procesar su contenido.

    // Por ejemplo, para mover el archivo a una carpeta "uploads" en el servidor:
    $carpetaDestino = 'uploads/';
    move_uploaded_file($ubicacionTemporal, $carpetaDestino . $nombreArchivo);
}

En el ejemplo anterior, se accede a diferentes propiedades del archivo enviado a través de la superglobal $_FILES. Estas propiedades incluyen el nombre del archivo, el tipo de archivo, el tamaño del archivo, la ubicación temporal del archivo en el servidor y cualquier error relacionado con el archivo.

Puedes realizar acciones con el archivo, como guardar el archivo en una ubicación específica en el servidor o procesar su contenido según tus necesidades.

Recuerda que al trabajar con archivos enviados por los usuarios, es importante realizar validaciones y asegurarse de que el archivo cumpla con los requisitos deseados (por ejemplo, tamaño máximo, tipo de archivo permitido) antes de procesarlo o guardarlos en el servidor. Además, considera tomar medidas de seguridad adicionales, como renombrar los archivos antes de guardarlos y evitar la ejecución de archivos maliciosos en el servidor.

Shelley Valdés Herrera

student•

Cambiar el servidor apache para mac

Leonardo Jiménez Ubaque

student•

Envío de Imágenes

Para enviar archivos al servidor usando PHP tenemos la variable superglobal $_FILES.

$_FILES

Cualquier archivo subido y enviado al servidor es guardado en una carpeta temporal que se limpia cada cierto tiempo.

La variable superglobal $_FILES contiene información en forma de array acerca del archivo que estamos manipulando, incluyendo su ruta a la carpeta temporal.

$_FILES es una de las variables superglobales en PHP que se utiliza para acceder a la información relacionada con los archivos que se han cargado en el servidor a través de una solicitud HTTP POST. Esta variable es especialmente útil cuando estás trabajando con formularios HTML que permiten a los usuarios cargar archivos, como imágenes, documentos, videos, etc.

Cuando un usuario envía un archivo a través de un formulario HTML con el atributo enctype configurado como "multipart/form-data" y el método POST, los detalles del archivo cargado se almacenan en el arreglo $_FILES. El contenido de $_FILES se organiza en un formato que proporciona información sobre el archivo cargado, como el nombre del archivo, su tipo MIME, la ubicación temporal en el servidor y otros detalles relevantes.

Aquí hay un ejemplo básico de cómo utilizar $_FILES para manejar un archivo cargado:

Supongamos que tienes un formulario HTML en un archivo llamado formulario.html:

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

Luego, en un archivo llamado procesar.php, puedes manejar el archivo cargado usando $_FILES:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['archivo'])) {
        $nombreArchivo = $_FILES['archivo']['name'];
        $tipoArchivo = $_FILES['archivo']['type'];
        $rutaTemporal = $_FILES['archivo']['tmp_name'];

        // Mover el archivo temporal a una ubicación permanente
        $rutaDestino = 'carpeta_destino/' . $nombreArchivo;
        move_uploaded_file($rutaTemporal, $rutaDestino);

        echo "Archivo subido con éxito: $nombreArchivo";
    } else {
        echo "No se seleccionó ningún archivo.";
    }
} else {
    echo "Esta página solo acepta solicitudes POST.";
}
?>

En este ejemplo, estamos verificando si la solicitud es una solicitud POST y luego accediendo a los detalles del archivo cargado a través de $_FILES. Luego, movemos el archivo temporal a una ubicación permanente utilizando move_uploaded_file().

Recuerda que el manejo de archivos cargados también debe ser seguro. Debes validar y verificar el archivo para asegurarte de que es seguro antes de moverlo o procesarlo en tu servidor.

Multipart Form Data

Por defecto, al enviar formularios en HTML tenemos un tipo de encriptación “application/x-www-form-urlencoded”, sin embargo, cuando trabajamos con archivos debemos cambiar este tipo de encriptado a “multipart/form-data”.

Código desarrollado 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</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'];
$nombreImagen = $_FILES['imagen']['name']; // Recuperamos el nombre de la imagen

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

jaime sandoval

student•

cada vez q veo la configuracion distinta para mac, mas me gusta fedora jijiji

Raymundo Lara Garcia

student•

Les dejo un mini tutorial para crear un snippet para debuggear arreglos:

Abre la paleta de comandos (CTRL + SHIFT + P)
Escribe "snippets" y pulsa ENTER
Escribe PHP y pulsa ENTER
Te abrirá un archivo JSON, pega el siguiente código al final de los comentarios:

"Debugger":{
		"prefix": "debugger",
		"body": [
			"echo \"<pre>\";",
      "print_r($1);",
      "echo \"</pre>\";"
		],
		"description": "Create a debugger structure"
	}

Guarda los cambios y ejecuta tu snippet en tu archivo php usando el valor de "prefix", en este caso "debugger"
Y como por arte de magia se escribirá todo el código y aparecerá el cursor donde indica "$1" para que escribas tu arreglo a debuggear
Puedes usar este truco para crear snippets de bloques de código que usas muy seguido

Christopher Bruno Carrillo Pulido

student•

Hola, no sé si a alguno de ustedes le servirá este tip, pero si les pasa como a mí, que andan en Ubuntu y no les gusta Chrome por los anuncios así que se fueron a Brave (Muy poco probable XD) al seleccionar una imagen como lo hicimos en el curso les saldrá lo siguiente:

Les sugiero que usen un navegador popular a estar días buscando si tenías un error tú 😢

Emerson David Cabrera Salas

student•

Demasiado pro esta clase!

Nelson Gonzalez Escalante

student•

$_FILES

Se suele usar para el trabajo con archivos en varios formatos, con esta Variable Super Global puedes acceder a la información del archivo que estas subiendo al servidor, por ejemplo si en un formulario el usuario carga una imagen y luego la sube al servidor haciendo clic en un botón Enviar imagen, cuando procesa la subida puedes ir obteniendo los datos de dicha imagen y manipular la imagen

<?php
   if(isset($_FILES['imagen'])){
      $datos = array();
      $nombre = $_FILES['imagen']['name'];
      $pesodelaimagen = $_FILES['imagen']['size'];
      $temporal = $_FILES['imagen']['tmp_name'];
      $formato =$_FILES['imagen']['type'];
 
     // Acá puedes decidir que hacer con los datos que obtienes de la imagen que el usuario cargue al servidor
      
   }
?>

<!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 - Envío de imágenes</title>
</head>
<body>
  <!-- Creación de formulario -->
  <!-- Se debe cambiar el tipo de encriptación para el envío de imágenes -->
  <form action="./server.php" method="POST" enctype="multipart/form-data">
  <label for="name">Nombre de la imágen: </label>
  <input type="text" name="name" id="name">
  <br/>
  <label for="image">Selecciona la imágen</label>
  <input type="file" name="image" id="image">

  <button type="submit">Enviar formulario</button>
  </form>
</body>
</html>

<?php
// Se obtienen los datos almacenados en las variables globales '$_POST' y '$_FILES'

// Se imprime lo que se mando por el método POST
print_r("<b>¿Qué contiene POST?</b>");
echo("<pre>");

  var_dump($_POST);
  /*
    Ejemplo de salida:
      array(1) {
        ["name"]=>
        string(4) "Joel"
      }
  */

echo("</pre>");

// Se obtiene el nombre
$nombre = (isset($_POST['name'])) ? $_POST['name'] : 'Sin nombre';

// Impresión de la variable $nombre
print_r("<b>Nombre</b>");
echo("<pre>");

  var_dump("Nombre: $nombre"); // string(12) "Nombre: Joel"

echo("</pre>");

// Impresión de la variable global $_FILES
print_r("<b>Imagen</b>");
echo("<pre>");

  var_dump($_FILES );
  /*
    Ejemplo de salida:
      array(1) {
        ["image"]=>
          array(5) {
          ["name"]=>
          string(9) "fondo.jpg"
          ["type"]=>
          string(10) "image/jpeg"
          ["tmp_name"]=>
          string(24) "C:\xampp\tmp\phpBC2E.tmp"
          ["error"]=>
          int(0)
          ["size"]=>
          int(1426311)
        }
      }
  */
  var_dump($_FILES['image']['type']); // string(10) "image/jpeg"

echo("</pre>");

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enviar archivo al servidor</title>
</head>
<body>
    <h2>Enviar archivo al servidor</h2>
    <form action="procesar.php" method="POST" enctype="multipart/form-data">
        <input type="file" name="archivo">
        <button type="submit">Enviar</button>
    </form>
</body>
</html>

<?php
if(isset($_FILES['archivo'])) {
    $nombreArchivo = $_FILES['archivo']['name'];
    $tipoArchivo = $_FILES['archivo']['type'];
    $tamanoArchivo = $_FILES['archivo']['size'];
    $ubicacionTemporal = $_FILES['archivo']['tmp_name'];
    $errorArchivo = $_FILES['archivo']['error'];

    // Aquí puedes realizar acciones con el archivo, como guardarlo en una ubicación específica o procesar su contenido.

    // Por ejemplo, para mover el archivo a una carpeta "uploads" en el servidor:
    $carpetaDestino = 'uploads/';
    move_uploaded_file($ubicacionTemporal, $carpetaDestino . $nombreArchivo);
}

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['archivo'])) {
        $nombreArchivo = $_FILES['archivo']['name'];
        $tipoArchivo = $_FILES['archivo']['type'];
        $rutaTemporal = $_FILES['archivo']['tmp_name'];

        // Mover el archivo temporal a una ubicación permanente
        $rutaDestino = 'carpeta_destino/' . $nombreArchivo;
        move_uploaded_file($rutaTemporal, $rutaDestino);

        echo "Archivo subido con éxito: $nombreArchivo";
    } else {
        echo "No se seleccionó ningún archivo.";
    }
} else {
    echo "Esta página solo acepta solicitudes POST.";
}
?>

<!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</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>

<?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'];
$nombreImagen = $_FILES['imagen']['name']; // Recuperamos el nombre de la imagen

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

<?php
   if(isset($_FILES['imagen'])){
      $datos = array();
      $nombre = $_FILES['imagen']['name'];
      $pesodelaimagen = $_FILES['imagen']['size'];
      $temporal = $_FILES['imagen']['tmp_name'];
      $formato =$_FILES['imagen']['type'];
 
     // Acá puedes decidir que hacer con los datos que obtienes de la imagen que el usuario cargue al servidor
      
   }
?>

Envío de imágenes

Introducción

¿Cómo se renderiza una página web en mi computadora?

Levantando un servidor local

¿Cómo combinar HTML con PHP?

PHP como preprocesador de HTML

Imprime texto y etiquetas HTML

Condicionales

Ciclos

¿Cómo pasar variables de PHP a JavaScript?

Evita el código espagueti

Refactorizando código espagueti

Manejo de formularios

Cómo obtener una solicitud al servidor con PHP

Envío de un formulario a través de GET

Envío de un formulario a través de POST

Envío de imágenes

Guardando imágenes en el servidor

Tipos de inputs

Otros tipos de inputs

Valida si un formulario ha sido enviado

Sanitizando datos de mi formulario

Validando datos

Proyecto: formulario de contacto

Creando el maquetado

Haciendo la lógica de recepción del formulario

Integrando PHPMailer

Implementando el servidor de correos de Gmail

Conclusión

Es tu turno de poner todo en práctica