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

Envío de imágenes

13/24
Recursos

Aportes 16

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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

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

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

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.

Para que el cuadro de dialogo solo muestre imagenes en las opciiones, podemos agregar a la etiqueta img el atributo: `accept="image/*"`
a ratos las cosas son solo de debuguear, verdad de dios que si jajaja xD

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

  1. Press CTRL + SHIFT + P
  2. Write Snippets
  3. Write the programming language’s name. It can be php in this case, then, press ENTER
  4. 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.

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>
    <h1>Enviar archivo al servidor</h1>
    <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.

Cambiar el servidor apache para mac

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";
?>

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

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

  1. Abre la paleta de comandos (CTRL + SHIFT + P)
  2. Escribe “snippets” y pulsa ENTER
  3. Escribe PHP y pulsa ENTER
  4. 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

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ú 😢

Demasiado pro esta clase!

$_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
      
   }
?>