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

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="/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.