¿Deseas incluir un campo de entrada en un formulario para que el usuario pueda adjuntar un archivo? Aquí explicamos como.

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

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. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).