Controles: Selección de archivos

HTML nos proporciona un campo de entrada de datos para seleccionar archivos, adjuntarlos y enviarlos junto al resto del formulario. Esta interfaz habitualmente se muestra como un botón «Examinar...» o «Seleccionar archivo» junto a un texto del archivo seleccionado por el usuario.

Para colocar este campo en nuestro formulario se indicará la etiqueta <input type="file">:

Tipo de información a obtener Etiqueta a utilizar Ejemplo
Adjuntar archivo <input type="file">

Atributos

En primer lugar, debemos saber que si queremos adjuntar archivos a nuestro formulario, es necesario indicar en la etiqueta <form> el atributo enctype="multipart/form-data". Con esto nos aseguramos que las cabeceras del formulario indican que estamos enviando archivos adjuntos.

También se nos permite añadir el atributo accept a la etiqueta <input type="file"> a modo de sugerencia, para indicar los formatos de archivos permitidos al usuario en el campo de selección de archivos.

Un ejemplo de este campo de selección de archivo:

<form name="formulario" method="post" action="http://pagina.com/send.php"
      enctype="multipart/form-data"> <!-- ¡No olvides el enctype! -->
  <!-- Campo de selección de archivo -->
  <input type="file" name="adjunto" accept=".pdf,.jpg,.png" multiple>
</form>

Si indicamos el atributo multiple en la etiqueta <input>, se le da la opción al usuario de pulsar la tecla CTRL para adjuntar varios archivos a la vez, y no uno solo.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.