search
CursosEmpresasBlogLiveConfPrecios
Curso de PHP: Integración con HTML

Guardando imágenes en el servidor

Curso de PHP: Integración con HTML

Contenido del curso

Introducción

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

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

    08:20 min
  • 2
    Levantando un servidor local

    Levantando un servidor local

    09:59 min

¿Cómo combinar HTML con PHP?

  • 3
    PHP como preprocesador de HTML

    PHP como preprocesador de HTML

    08:43 min
  • 4
    Imprime texto y etiquetas HTML

    Imprime texto y etiquetas HTML

    07:00 min
  • 5
    Condicionales

    Condicionales

    11:43 min
  • 6
    Ciclos

    Ciclos

    09:41 min
  • 7
    ¿Cómo pasar variables de PHP a JavaScript?

    ¿Cómo pasar variables de PHP a JavaScript?

    16:26 min
  • 8
    Evita el código espagueti

    Evita el código espagueti

    08:58 min
  • 9
    Refactorizando código espagueti

    Refactorizando código espagueti

    18:19 min

Manejo de formularios

  • 10
    Cómo obtener una solicitud al servidor con PHP

    Cómo obtener una solicitud al servidor con PHP

    08:01 min
  • 11
    Envío de un formulario a través de GET

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

    12:13 min
  • 12
    Envío de un formulario a través de POST

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

    07:38 min
  • 13
    Envío de imágenes

    Envío de imágenes

    09:02 min
  • 14
    Guardando imágenes en el servidor

    Guardando imágenes en el servidor

    Viendo ahora
  • 15
    Tipos de inputs

    Tipos de inputs

    15:29 min
  • 16
    Otros tipos de inputs

    Otros tipos de inputs

    07:14 min
  • 17
    Valida si un formulario ha sido enviado

    Valida si un formulario ha sido enviado

    11:21 min
  • 18
    Sanitizando datos de mi formulario

    Sanitizando datos de mi formulario

    15:05 min
  • 19
    Validando datos

    Validando datos

    07:59 min

Proyecto: formulario de contacto

  • 20
    Creando el maquetado

    Creando el maquetado

    13:03 min
  • 21
    Haciendo la lógica de recepción del formulario

    Haciendo la lógica de recepción del formulario

    12:02 min
  • 22
    Integrando PHPMailer

    Integrando PHPMailer

    20:36 min
  • 23
    Implementando el servidor de correos de Gmail

    Implementando el servidor de correos de Gmail

    07:40 min

Conclusión

  • 24
    Es tu turno de poner todo en práctica

    Es tu turno de poner todo en práctica

    01:50 min
Tomar examen

Guardando imágenes en el servidor

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

Comentarios26

Gabriel Ignacio China Cortez

Gabriel Ignacio China Cortez

Estudiante
Hace 4 años
    Aka SinssChoss

    Aka SinssChoss

    Estudiante
    Hace 4 años
    LESTHER XITUMUL MANUEL

    LESTHER XITUMUL MANUEL

    Estudiante
    Hace 3 años
Rubén Cuello

Rubén Cuello

Estudiante
Hace 4 años
    Ermilo Joel Dorantes Uc

    Ermilo Joel Dorantes Uc

    Estudiante
    Hace 4 años
    Omar Ismael Martínez Gómez

    Omar Ismael Martínez Gómez

    Estudiante
    Hace 4 años
Eduardo Reyes

Eduardo Reyes

Estudiante
Hace 4 años
Juan David Rueda Quiroga

Juan David Rueda Quiroga

Estudiante
Hace 4 años
Henry

Henry

Estudiante
Hace 4 años
    Fredy Ramirez

    Fredy Ramirez

    Estudiante
    Hace 4 años
    Fredy Ramirez

    Fredy Ramirez

    Estudiante
    Hace 4 años
Luis Alberto Aguilar Muñoz

Luis Alberto Aguilar Muñoz

Estudiante
Hace 3 años
José Luis Luna Rubio

José Luis Luna Rubio

Estudiante
Hace 4 años
Elliot Aristeo Urizar Rodas

Elliot Aristeo Urizar Rodas

Estudiante
Hace 3 años
    Elliot Aristeo Urizar Rodas

    Elliot Aristeo Urizar Rodas

    Estudiante
    Hace 3 años
LEONARDO DAVID PENUELA GUTIERREZ

LEONARDO DAVID PENUELA GUTIERREZ

Estudiante
Hace 2 años
LEONARDO DAVID PENUELA GUTIERREZ

LEONARDO DAVID PENUELA GUTIERREZ

Estudiante
Hace 2 años
José Herrera

José Herrera

Estudiante
Hace 3 años
Yerson Felipe Ramirez Garnica

Yerson Felipe Ramirez Garnica

Estudiante
Hace 4 años
    Ermilo Joel Dorantes Uc

    Ermilo Joel Dorantes Uc

    Estudiante
    Hace 4 años
    Kenneth Angulo L

    Kenneth Angulo L

    Estudiante
    Hace 4 años
Maricielo Anchahua Flores

Maricielo Anchahua Flores

Estudiante
Hace 2 años
Maricielo Anchahua Flores

Maricielo Anchahua Flores

Estudiante
Hace 2 años
Isaí Sánchez Jiménez

Isaí Sánchez Jiménez

Estudiante
Hace 2 años
Isaí Sánchez Jiménez

Isaí Sánchez Jiménez

Estudiante
Hace 2 años
Rubén Téllez Gerardo

Rubén Téllez Gerardo

Estudiante
Hace 2 años
Jonathan Amaya Mendieta

Jonathan Amaya Mendieta

Estudiante
Hace 2 años
LUIS MIGUEL OLARTE BELLO

LUIS MIGUEL OLARTE BELLO

Estudiante
Hace 3 años
Jose Alejandro Pantoja Giraldo

Jose Alejandro Pantoja Giraldo

Estudiante
Hace 3 años

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> <h3><?= $mensaje ?></h3> <img src="<?= $ruta_a_subir ?>" alt="<?= $basename ?>"> </body> </html>

Muy buen aporte!!!! :)

Awesome, también hay un error para validar si se ha superado el tamaño máximo (en bits) del archivo subido, en caso de que este umbral sea superado también marcaría un error, esto es útil cuando no queremos que se suban archivos muy pesados al server: UPLOAD_ERR_INI_SIZE

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

¿Cómo estás corriendo tu servidor? ¿Mac, Win, Linux?

Quiero pensar que los estás corriendo sobre Linux o MacOS. A mi me pasó lo mismo debido a los permisos de la carpeta donde quería subir la imagen. Linux (y otros derivados de Unix [MacOS, Darwin, NetBSD, Solaris, etc.]) usan un sistema de permisos en sus archivos. en consola los puedes ver con un comando ls con las opciones de listado largo:

$ ls -l

Tienes que estar en la ruta donde vas a listar las propiedades de dicha carpeta.

Generalmente en UNIX (refiriéndome a todos sus derivados) el sistema de permisos se ve así:

  • Primer carácter para saber si es archivo, directorio o enlace. -- - Archivo -- d Directorio -- l Enlace
  • Tres caracteres siguientes para saber los permisos de lectura, escritura y ejecución del PROPIETARIO de la carpeta o archivo.
  • Tres caracteres siguientes para saber los permisos de lectura, escritura y ejecución del GRUPO de la carpeta o archivo.
  • Tres caracteres siguientes para saber los permisos de lectura, escritura y ejecución de OTROS USUARIOS de la carpeta o archivo.

(Yo me grabé el orden en mi cabeza con las iniciales DUGO [Directorio, User, Group, Others])

Para representar los permisos se usan las letras:

  • r (Read) = 4
  • w (Write) = 2
  • x (eXecute) = 1

La sumatoria de estos tres valores equivalen a 7 (todos los permisos activos) Ejemplos de ésto:

-rw-r--r-- 1 1000 1000 606 Aug 21 11:52 formulario.php drwxrwxrwx 2 1000 1000 4096 Aug 21 12:31 images -rw-r--r-- 1 1000 1000 240 Aug 21 12:28 server.php

(Así me aparece a mi [yo cambié los permisos a mano de images])

Pueden pasar:

--- Sin permisos r-- 4, sólo lectura (r) rw- 6, lectura y escritura (rw) rwx 7, lectura, escritura y ejecución (rwx) r-x 5, lectura y ejecución (rx) --x 1, ejecución (x)

Y para terminar, si lo que quiero es cambiarle los permisos a mi directorio images para que me deje escribir en él un archivo yo lo que hice fue:

$ chmod 777 images (si tuviera contenido el directorio y quiero también afectarlo tendría qué hacer:) $ chmod 777 -R images

Puedes ver más referencia a esto a través del video siguiente: https://platzi.com/clases/1667-linux/22827-interaccion-con-archivos-y-permisos/

Saludos.

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

EDltqFtXYAAuJW-.jpg

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

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.

Excelente aporte, aunque seria mejor realizar ese tipo de validaciones (con javascript) antes de que llegue al servidor, con eso podemos dar advertencias a nuestro usuario si es el caso que llega a cargar mal el archivo

Captura.JPG

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

Hola, tengo una dudo y aun no se como resolverla.

al subir mi imagen el tmp_name siempre me sale vacio, esto hace a que no pueda obtener el path para moverlo

array(1) { ["image"]=> array(5) { ["name"]=> string(44) "rolling_waves_by_mequinoxem_d6lc1vr-3840.png" ["type"]=> string(0) "" ["tmp_name"]=> string(0) "" ["error"]=> int(1) ["size"]=> int(0) } }

Resuelto: por alguna razon el php /etc/php/8.2/fpm/php.ini no tenia

;upload_tmp_dir = "/tmp"

la ruta temporal que muestra el arreglo de la imagen, no existe en el servidor.

Alguien sabe por qué pasa esto?

Como se puede manejar en lugar de una imagen, manejar una hoja de calculo? Y poder manipular o, poder tomar los datos dentro de esta hoja de calculo dentro de php?

Y cual es el codigo para mover multiples archivos porque ese codigo de esta clase es solo para mover un solo archivo o imagen cual es el codigo para mover varias imagenes . . .

como evitar que se sobrescriba la imagen?

Hay que validar los campos del formulario para evitar que se sobrescriba la imagen. Muchos lo hacen con JS.

Desde PHP puedes (cuando la imagen ya llego al server)

  • Validar que el arhivo no exista si existe decidir que hacer.
  • Validar si el archivo que viene es mas reciente
  • agregar un timestamp y validar que te traigas el archivo mas reciente.
  • Las opciones son varias para jugar con los archivos

Para efectos de los ejercicios que estamos haciendo en la clase y hacer pruebas con el mismo archivo, podemos al nombre del archivo concatenarle un timestamp, eso ocaciona que aunque subas el mismo archivo el nombre sea diferente asi:

// obtener nombre de la carpeta donde voy a guardar // para el ejercicio uso la misma carpeta del proyecto $savePath = time() . '-' . $fileName;

Espero este truco te sea de utilidad para las pruebas, para depurar tus proyectos.

{ "Debug with pre and var_dump": { "prefix": "pre", "body": [ "echo \"<pre>\";", "var_dump(${1:});", "echo \"</pre>\";" ], "description": "Echo preformatted var_dump for debugging" } } ```{  "Debug with pre and var\_dump": {    "prefix": "pre",    "body": \[      "echo \\"\<pre>\\";",      "var\_dump(${1:});",      "echo \\"\</pre>\\";"    ],    "description": "Echo preformatted var\_dump for debugging"  }}

snippets

  1. control + shift + p
  2. buscar snippets
  3. codigo

{  "Debug with pre and var_dump": {    "prefix": "pre",    "body": [      "echo \"<pre>\";",      "var_dump(${1:});",      "echo \"</pre>\";"    ],    "description": "Echo preformatted var_dump for debugging"  }}

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

,problem%20encountered%20in%20user%20agents.

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

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.

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