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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Adquiere por un año todos los cursos, escuelas y certificados por un precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Aportes 14
Preguntas 0
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.
Configurar tus propios snippets de código en Visual Studio CodeCTRL + SHIFT + PSnippetsphp in this case, then, press ENTER"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 HTMLPara 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
Para enviar archivos al servidor usando PHP tenemos la variable superglobal $_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.
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”.
<!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:
"Debugger":{
"prefix": "debugger",
"body": [
"echo \"<pre>\";",
"print_r($1);",
"echo \"</pre>\";"
],
"description": "Create a debugger structure"
}
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
}
?>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.