Curso de HTML - Formulario input type file
¿ Qué es HTML? Estructura interna Salto de línea Párrafo Títulos Enfasis Hipervínculo a otra página Hipervínculo a otro sitio WEB Imágenes en una página Hipervínculo en una imagen Apertura de un hipervínculo en otra instancia del navegador Enlace a un correo Anclas en la misma página Anclas en la otra página Lista ordenada Lista no ordenada Lista de definiciones Listas anidadas Tablas Tabla con encabezado Tabla con título Combinación de celdas Titulo de la pagina Contenido de la cabecera Comentarios en una página Caracteres especiales Formulario form Formulario input Formulario texarea Formulario checkbox Formulario radio Formulario Select 1 Formulario Select 2 Formulario Select 3 Formulario Button Formulario Button 2 Formulario type= Formulario - input type= Formulario - agrupamiento de controles Formulario - controles con valores iniciales Formulario - orden de foco de controles Formulario - Inhabilitar controles Formulario - Text/password y maxlength Formulario - text/password/textarea y readonly Formulario - Envío de datos mediante mail Formulario - label Frames Actualización de un frame Frames - Medidas Frames - propiedades Frames - Anidamiento iframes Declaración DOCTYPE HTML Transitional DOCTYPE. HTML Estricto DOCTYPE. para Frames Validación de enlaces Conceptos hojas de estilo Texto en CSS Elementos div y span Fuentes con CSS Elementos obsoletos de html

Formulario input type file

Los formularios HTML permiten que el usuario seleccione archivos para subirlos (enviarlos) al servidor. El control “entrada de archivos” muestra una caja de texto donde el usuario debe especificar la ruta del archivo que se encuentra en el ordenador del usuario y que será enviado al servidor.
De esta manera podemos enviar archivos desde un computador cliente al servidor a través de una página web. El control habitualmente muestra un botón para elegir el archivo visualmente.

El control de tipo file nos permite enviar un archivo al servidor. Nuevamente el HTML solo indica al navegador que debe enviar el archivo al servidor pero debe haber en el servidor un programa que lo almacene en una carpeta del servidor.

Veamos la sintaxis para disponer un control de tipo file:

<input type="file" name="archi">

Nuevamente utilizamos el elemento HTML input para definir este tipo de control. En la propiedad type inicializamos con el valor file. Inicializar la propiedad name también es importante ya que mediante este nombre se lo recupera en el servidor.

Otra cosa muy importante a tener en cuenta cuando hacemos upload de archivos al servidor es inicializar la propiedad enctype del elemento form:

<form method="post" action="registrardatos.php" enctype="multipart/form-data">

Con esto indicamos al navegador que el formulario almacena uno o más archivos que deben ser enviados al servidor.

Atributo enctype de la etiqueta form

Para permitir el envío de archivos a través de un formulario hemos de tener en cuenta varias cosas.

La primera, que existían dos métodos de envío: get y post. Get transmite la información en forma de texto a la url de destino, por tanto no será un método válido para el envío de archivos (ya que no podemos enviar un archivo en modo de texto a una url de destino). Para permitir la selección y envío de archivos a través de un formulario tendremos por tanto que usar el método post.

La segunda, que existe un protocolo para el envío de la información desde la url donde se encuentra el formulario hasta la url de destino. Este protocolo permite tener en cuenta si se envía simplemente texto o si se envían cosas más complejas como archivos, ya que no es lo mismo la transmisión de una cosa que de otra.

Si no se especifica el valor del atributo enctype el navegador aplica un valor por defecto (dicho valor es application/x-www-form-urlencoded). Este valor, que no es necesario especificar ya que el navegador lo añade sin necesidad de escribirlo, indica que se envía texto y permite que se apliquen los protocolos adecuados.

Para enviar archivos debe especificarse el valor del atributo enctype =  "multipart/form-data" como veremos en el ejemplo de código a continuación.

Type file en la etiqueta Input

Finalmente, para crear el control en el formulario que permita al usuario seleccionar un archivo hemos de crear una etiqueta input y establecer su atributo type = "file"

Escribe el siguiente código en un editor como Notepad++ y guárdalo con el nombre que quieras. Confeccionemos una página que solicite el ingreso de un nombre y la foto de la persona: 

<html>
<head> <title>Prueba de formulario</title> </head>
<body>
<form action="subefoto.php" method="post" enctype="multipart/form-data">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione la foto: <input type="file" name="foto">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Recordemos siempre inicializar la propiedad enctype del elemento form:

<form action="registrardatos.php" method="post" enctype="multipart/form-data">

Tenga en cuenta que si no se hace nigún programa en el servidor el archivo no se almacena. Si quere conocer como se hace esto en PHP puede visitar: PHP

Ver ejemplo