Elemento input (type=file)

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento input, teniendo el valor "file" en su atributo type, representa un control para seleccionar una lista de uno o más archivos para ser subidos al servidor. Cuando el formulario es enviado, los archivos seleccionados son subidos al servidor, junto con su nombre y tipo.

Para que los archivos seleccionados sean correctamente enviados al servidor, el valor "multipart/form-data" debe estar presente en el atributo enctype del formulario (form), o en el atributo formenctype del botón usado para enviar el formulario.

Cuando el atributo booleano multiple está presente, los usuarios pueden seleccionar más de un archivo para ser subidos al servidor.

El atributo accept puede ser usado en este elemento para ofrecer al navegador una pista acerca de los tipos de archivo que el usuario debería enviar. Con esta información, el navegador puede establecer restricciones acerca de los archivos que el usuario puede escoger o proveer funcionalidades extra para tipos específicos de archivos, como por ejemplo, permitir la captura de una imagen con la cámara web cuando los tipos permitidos sean de imagen.

Los autores no deberían confiar en el atributo accept como un método estricto de filtrado de la entrada del usuario. Cuando los navegadores no soporten el mecanismo o los archivos tengan sus extensiones alteradas, esta comprobación puede fallar. Se deberían llevar a cabo, siempre, comprobaciones en el servidor.

Ejemplos

En nuestro primer ejemplo crearemos un formulario (form) con un control de subida de un solo archivo, donde podrás probar el desempeño del control con una subida de archivo real. Nota que el formulario tiene al atributo enctype correctamente establecido a "multipart/form-data", como es requerido por la subida de archivos.

Nota: por favor, elige archivos pequeños (menos de 300KB) o el tiempo de subida puede tornarse considerable. Archivos con un tamaño mayor a 2MB no serán subidos.

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Sube un archivo:
    <input type="file" name="archivosubido">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Sube un archivo:

Es hora de intentar subir múltiples archivos. Este ejemplo será exactamente igual al anterior con la excepción de que el atributo multiple estará presente en el control de archivos, y su atributo name tendrá un par de corchetes ("[]") al final. Ambas condiciones son necesarias para implementar una subida exitosa de múltiples archivos.

Nota: por favor, intenta no subir un número grande de archivos o mantén sus tamaños bajos (menos de 300KB) ya que el tiempo de subida puede tornarse considerable. Archivos con un tamaño mayor a 2MB no serán subidos.

El soporte provisto por los navegadores para la subida múltiple de archivos es incompleto, especialmente en los dispositivos móviles. Para compatibilidad completa, los autores pueden tener que recurrir a programas.

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Sube archivos:
    <input type="file" name="archivossubidos[]" multiple>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Sube archivos:

Ahora implementaremos una subida de un solo archivo con algunas restricciones acerca del tipo de archivo, mediante en altributo accept del control. El atributo accept toma una lista de valores separados por coma que pueden ser cualquiera de los siguientes: un Tipo de medio de Internet; una extensión de archivo (como ".jpg" o ".pdf"); o una de las cadenas "audio/*", "video/*" e "image/*" representando archivos de sonido, video e imagen, respectivamente. Éste provee al navegador una pista acerca de los tipos de archivos que el autor espera recibir en este control. Los navegadores que soportan el mecanismo normalmente restringirán los tipos de archivo que podrán seleccionarse a los especificados en este atributo.

Los autores no deberían confiar en el atributo accept como un método estricto de filtrado de la entrada del usuario. Cuando los navegadores no soporten el mecanismo o los archivos tengan sus extensiones alteradas, esta comprobación puede fallar. Se deberían llevar a cabo, siempre, comprobaciones en el servidor.

Para mejorar la compatibilidad, se alienta a los autores a proveer múltiples referencias (con Tipos de medios de Internet y extensiones) de un tipo de archivo, siempre que sea posible.

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Sube una imagen:
    <input type="file" name="imagensubida" accept="image/png, .jpeg, .jpg, image/gif">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Sube una imagen:

Atributos

Atributos específicos

accept

Una lista de valores separados por coma que pueden ser cualquiera de los siguientes: un Tipo de medio de Internet; una extensión de archivo (como ".jpg" o ".pdf"); o una de las cadenas "audio/*", "video/*" e "image/*" representando archivos de sonido, video e imagen, respectivamente. Este atributo provee al navegador una pista acerca de los tipos de archivos que el autor espera recibir en este control. Los navegadores que soportan el mecanismo normalmente restringirán los tipos de archivo que podrán seleccionarse a los especificados en este atributo.

Los autores no deberían confiar en el atributo accept como un método estricto de filtrado de la entrada del usuario. Cuando los navegadores no soporten el mecanismo o los archivos tengan sus extensiones alteradas, esta comprobación puede fallar. Se deberían llevar a cabo, siempre, comprobaciones en el servidor.

Para mejorar la compatibilidad, se alienta a los autores a proveer múltiples referencias (con Tipos de medios de Internet y extensiones) de un tipo de archivo, siempre que sea posible.

Ejemplo

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Subir un documento:
    <input type="file" name="documentosubido" accept="application/pdf, .doc, .docx, .odf">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Subir un documento:

autofocus

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

Ejemplo

<p><input type="file" name="archivosubido" autofocus></p>

disabled

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Sube un archivo:
    <input type="file" name="archivosubido" disabled>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Sube un archivo:

form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

Ejemplo

<p>Sube un archivo: <input type="file" name="archivosubido" form="formulario1"><p>
<form id="formulario1" action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><input type="submit" value="Enviar datos"></p>
</form>

Sube un archivo:

multiple

Un valor booleano que indica si el control debería aceptar la selección de más de un archivo a la vez. Si el atributo tiene el valor "multiple" o la cadena vacía (""), o si está simplemente presente, el control debería permitir a los usuarios elegir más de un archivo a la vez.

Cuando el atributo multiple está presente, cualquier valor dado al atributo name debe estar seguido por un par de corchetes ("[]") para que la subida múltiple de archivos funcione correctamente.

Ejemplo

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Archivos a subir:
    <input type="file" name="archivossubidos[]" multiple>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Archivos a subir:

name

Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, e identificará al archivo y su información relevante, en el servidor.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

Cuando el atributo multiple está presente, cualquier valor dado al atributo name debe estar seguido por un par de corchetes ("[]") para que la subida múltiple de archivos funcione correctamente.

Ejemplo

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    File to upload:
    <input type="file" name="uploadedfile">
    <input type="submit" value="Send data">
  </p>
</form>

File to upload:

required

Un valor booleano que indica si este control puede ser dejado en blanco o no. Si este atributo tiene el valor "required" o la cadena vacía (""), o si está siplemente presente, el usuario tendrá que seleccionar un archivo para este control a fin de poder enviar el formulario.

El soporte provisto por los navegadores para el atributo required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Ejemplo

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p>
    Foto de perfil:
    <input type="file" name="fotoperfil" required>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Foto de perfil:

type

Un valor que indica el tipo de campo que representa este elemento. Existen veintidós valores posibles (insensibles a mayúsculas/minúsculas):

  • hidden: un control oculto utilizado para enviar información al servidor, típicamente manejado por programas.
  • text: un control usado para la entrada de una sola línea de texto.
  • search: igaul a text pero con fines de búsqueda.
  • tel: un control usado para proveer un número de teléfono.
  • url: una caja de texto usada para el ingreso de un único URL absoluto.
  • email: un control diseñado para editar una o más direcciones de e-mail.
  • password: una caja de texto para la edición de contraseñas, donde los caracteres son representados por puntos.
  • date: un control para ingresar una fecha específica.
  • month: un control para ingresar un mes específico.
  • week: un control para ingresar una semana específica.
  • time: un control para ingresar una hora específica.
  • datetime-local: un control para ingresar una fecha y hora local específica.
  • number: un control para ingresar un número.
  • range: un control para ingresar uno o dos números dentro de un rango.
  • color: un control para ingresar un color.
  • checkbox: un control para ingresar un valor booleano (verdadero/falso).
  • radio: un control para elegir una única opción entre varias.
  • file: un control usado para subir archivos al servidor.
  • submit: un botón usado para enviar el formulario.
  • image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la apariencia predeterminada de los botones.
  • reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
  • button: un botón sin una acción predeterminada asociada.

Cuando este atributo está ausente, el elemento se comporta como si tuviera el valor "text".

Ejemplo

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

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.