Teoría
Teoría

Un campo para subir archivos

Un campo para subir archivos se crea con una etiqueta <input> de tipo file. Para enviar sus datos al servidor, el campo debe tener un nombre.

Para que el navegador pueda enviar el archivo seleccionado, hay que agregar al formulario el atributo enctype con el valor multipart/form-data. Al formulario, no al campo.

Este atributo indica al navegador en qué formato debe enviar los datos. El valor multipart/form-data permite enviar los campos y los archivos en partes separadas dentro de la misma solicitud.

Por cierto, el aspecto de los campos de tipo file varía mucho según el sistema operativo, y sus controles nativos son difíciles de personalizar con estilos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Un campo para subir archivos</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Perfil</h1> <form action="https://codigoheroe.com/echo" method="post"> <p>Elige una imagen para tu avatar:</p>  <input type="submit" value="Subir"> </form> </body> </html>

CSS

input[type="submit"] { display: block; margin-top: 10px; }

ObjetivosRealizado

Agrega al formulario el atributo enctype con el valor necesario para subir archivos.
Agrega un campo para subir archivos con el nombre avatar.