Los elementos<input> contype="file" permiten al usuario elegir uno o más archivos desde el almacenamiento de su dispositivo. Una vez seleccionados, los archivos pueden ser subidos a un servidor usando elenvío de formularios, o manipulados utilizando código JavaScript y laAPI de archivos (File API).

Pruébalo

<label for="avatar">Choose a profile picture:</label><input type="file" name="avatar" accept="image/png, image/jpeg" />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

Valor

El atributovalue de uninput de archivo contiene una cadena que representa la ruta a los archivos seleccionados. Si aún no se ha seleccionado ningún archivo, el valor es una cadena vacía (""). Cuando el usuario selecciona múltiples archivos, elvalue representa el primer archivo en la lista de archivos seleccionados. Los otros archivos pueden ser identificados utilizando lapropiedad HTMLInputElement.files delinput.

Atributos adicionales

Además de los atributos comunes compartidos por todos los elementos<input>, losinput de tipofile también soportan los siguientes atributos:

accept

El valor del atributoaccept es una cadena que define los tipos de archivos que elinput de archivo debería aceptar. Esta cadena es una lista separada por comas deespecificadores de tipo de archivo únicos. Debido a que un tipo de archivo dado puede ser identificado de más de una manera, es útil proporcionar un conjunto completo de especificadores de tipo cuando necesitas archivos de un formato dado.

Por ejemplo, hay varias maneras de identificar archivos de Microsoft Word, por lo que un sitio que acepte archivos de Word podría usar un<input> como este:

<input  type="file"   accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

capture

El valor del atributocapture es una cadena que especifica qué cámara utilizar para capturar datos de imagen o video, si el atributoaccept indica que elinput debe ser de uno de esos tipos. Un valor deuser indica que se debe usar la cámara y/o micrófono orientados hacia el usuario. Un valor deenvironment especifica que se debe usar la cámara y/o micrófono orientados hacia el entorno. Si este atributo falta, elagente de usuario es libre de decidir por sí mismo qué hacer. Si el modo de orientación solicitado no está disponible, el agente de usuario puede volver a su modo predeterminado preferido.

multiple

Cuando se especifica el atributo booleanomultiple, elinput de archivo permite al usuario seleccionar más de un archivo.

Atributos no estándar

Además de los atributos listados anteriormente, los siguientes atributos no estándar están disponibles en algunos navegadores. Deberías intentar evitar usarlos cuando sea posible, ya que hacerlo limitará la capacidad de tu código para funcionar en navegadores que no los implementan.

webkitdirectory

El atributo booleanowebkitdirectory, si está presente, indica que solo los directorios deberían estar disponibles para ser seleccionados por el usuario en la interfaz del selector de archivos. ConsultaHTMLInputElement.webkitdirectory para detalles adicionales y ejemplos.

Aunque originalmente implementado sólo para navegadores basados en WebKit,webkitdirectory también se puede usar en Microsoft Edge, así como en Firefox 50 y posteriores. Sin embargo, aunque tiene un soporte relativamente amplio, aún no es estándar y no debería usarse a menos que no tengas alternativa.

Especificadores de tipo de archivo únicos

Unespecificador de tipo de archivo único es una cadena que describe un tipo de archivo que puede ser seleccionado por el usuario en un elemento<input> de tipofile. Cada especificador de tipo de archivo único puede tomar una de las siguientes formas:

• Una extensión de nombre de archivo válida, insensible a mayúsculas, comenzando con un carácter punto ("."). Por ejemplo:.jpg,.pdf o.doc.
• Una cadena de tipo MIME válida, sin extensiones.
• La cadenaaudio/* que significa "cualquier archivo de audio".
• La cadenavideo/* que significa "cualquier archivo de video".
• La cadenaimage/* que significa "cualquier archivo de imagen".

El atributoaccept toma una cadena que contiene uno o más de estos especificadores de tipo de archivo únicos como su valor, separados por comas. Por ejemplo, un selector de archivos que necesita contenido que puede presentarse como una imagen, incluyendo tanto formatos de imagen estándar como archivos PDF, podría verse así:

<input type="file" accept="image/*,.pdf" />

Usando inputs de archivo

Un ejemplo básico

<form method="post" enctype="multipart/form-data">  <div>    <label for="file">Elige el archivo para subir</label>    <input type="file" name="file" multiple />  </div>  <div>    <button>Enviar</button>  </div></form>

div {  margin-bottom: 10px;}

Esto produce el siguiente resultado:

Independientemente del dispositivo o sistema operativo del usuario, elinput de archivo proporciona un botón que abre un cuadro de diálogo del selector de archivos que permite al usuario elegir un archivo.

Incluir el atributomultiple, como se muestra arriba, especifica que se pueden elegir múltiples archivos a la vez. El usuario puede elegir múltiples archivos desde el selector de archivos de cualquier manera que su plataforma elegida permita (por ejemplo, manteniendo presionada la teclaShift oControl y luego haciendo clic). Si solo quieres que el usuario elija un solo archivo por<input>, omite el atributomultiple.

Obteniendo información sobre los archivos seleccionados

Los archivos seleccionados son devueltos por la propiedadHTMLInputElement.files del elemento, que es un objetoFileList que contiene una lista de objetosFile. ElFileList se comporta como un arreglo, por lo que puedes verificar su propiedadlength para obtener el número de archivos seleccionados.

Cada objetoFile contiene la siguiente información:

name

El nombre del archivo.

lastModified

Un número que especifica la fecha y hora en que el archivo fue modificado por última vez, en milisegundos desde la época UNIX (1 de enero de 1970, a medianoche).

lastModifiedDateObsoleto

Un objetoDate que representa la fecha y hora en que el archivo fue modificado por última vez.Esto está obsoleto y no debería usarse. Usa lastModified en su lugar.

size

El tamaño del archivo en bytes.

type

Eltipo MIME del archivo.

webkitRelativePathNo estándar

Una cadena que especifica la ruta del archivo relativa al directorio base seleccionado en un selector de directorios (es decir, uninput de tipofile en el que se establece el atributowebkitdirectory).Esto no es estándar y debe usarse con precaución.

Limitando los tipos de archivo aceptados

A menudo no querrás que el usuario pueda seleccionar cualquier tipo de archivo arbitrario; en su lugar, a menudo quieres que seleccionen archivos de un tipo o tipos específicos. Por ejemplo, si tu entrada de archivo permite a los usuarios subir una foto de perfil, probablemente querrás que seleccionen formatos de imagen compatibles con la web, comoJPEG oPNG.

Los tipos de archivo aceptables se pueden especificar con el atributoaccept, que toma una lista separada por comas de extensiones de archivo permitidas o tipos MIME. Algunos ejemplos:

• accept="image/png" oaccept=".png": Acepta archivos PNG.
• accept="image/png, image/jpeg" oaccept=".png, .jpg, .jpeg": Acepta archivos PNG o JPEG.
• accept="image/*": Acepta cualquier archivo con un tipo MIME deimage/*. (Muchos dispositivos móviles también permiten al usuario tomar una foto con la cámara cuando se usa esto).
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Acepta cualquier cosa que huela a un documento de MS Word.

Veamos un ejemplo más completo:

<form method="post" enctype="multipart/form-data">  <div>    <label for="profile_pic">Elige el archivo para subir</label>    <input      type="file"           name="profile_pic"      accept=".jpg, .jpeg, .png" />  </div>  <div>    <button>Enviar</button>  </div></form>

div {  margin-bottom: 10px;}

Esto produce un resultado similar al ejemplo anterior:

Puede parecer similar, pero si intentas seleccionar un archivo con esteinput, verás que el selector de archivos solo te permite seleccionar los tipos de archivo especificados en el valoraccept (la interfaz exacta difiere entre navegadores y sistemas operativos).

El atributoaccept no valida los tipos de archivos seleccionados, sino que proporciona sugerencias a los navegadores para guiar a los usuarios hacia la selección de los tipos de archivos correctos. Aún es posible (en la mayoría de los casos) que los usuarios activen una opción en el selector de archivos que les permita anular esto y seleccionar cualquier archivo que deseen, y luego elegir los tipos de archivos incorrectos.

Debido a esto, debes asegurarte de que el atributoaccept esté respaldado por una validación adecuada del lado del servidor.

Detectar cancelaciones

El eventocancel se activa cuando el usuario no cambia su selección, volviendo a seleccionar los archivos previamente seleccionados. El eventocancel también se activa cuando el cuadro de diálogo del selector de archivos se cierra o se cancela mediante el botón "cancelar" o la tecla deescape.

Por ejemplo, el siguiente código registrará en la consola si el usuario cierra el cuadro de diálogo sin seleccionar un archivo:

const elem = document.createElement("input");elem.type = "file";elem.addEventListener("cancel", () => {  console.log("Cancelado.");});elem.addEventListener("change", () => {  if (elem.files.length == 1) {    console.log("Archivo seleccionado: ", elem.files[0]);  }});elem.click();

Notas

1. No puedes establecer el valor de un selector de archivos desde un script: hacer algo como lo siguiente no tiene ningún efecto:

   js

   const input = document.querySelector("input[type=file]");input.value = "foo";

2. Cuando se elige un archivo usando un<input type="file">, la ruta real al archivo fuente no se muestra en el atributovalue delinput por razones obvias de seguridad. En su lugar, se muestra el nombre del archivo, conC:\fakepath\ como prefijo. Hay algunas razones históricas para esta peculiaridad, pero está soportada en todos los navegadores modernos y, de hecho, estádefinida en la especificación.

Ejemplos

En este ejemplo, presentaremos un selector de archivos ligeramente más avanzado que aprovecha la información del archivo disponible en la propiedadHTMLInputElement.files, además de mostrar algunos trucos ingeniosos.

Primero, veamos el HTML:

<form method="post" enctype="multipart/form-data">  <div>    <label for="image_uploads">Elige imágenes para subir (PNG, JPG)</label>    <input      type="file"           name="image_uploads"      accept=".jpg, .jpeg, .png"      multiple />  </div>  <div>    <p>No hay archivos seleccionados actualmente para subir</p>  </div>  <div>    <button>Enviar</button>  </div></form>

html {  font-family: sans-serif;}form {  background: #ccc;  margin: 0 auto;  padding: 20px;  border: 1px solid black;}form ol {  padding-left: 0;}form li,div > p {  background: #eee;  display: flex;  justify-content: space-between;  margin-bottom: 10px;  list-style-type: none;  border: 1px solid black;}form img {  height: 64px;  order: 1;}form p {  line-height: 32px;  padding-left: 10px;}form label,form button {  background-color: #7f9ccb;  padding: 5px 10px;  border-radius: 5px;  border: 1px ridge black;  font-size: 0.8rem;  height: auto;}form label:hover,form button:hover {  background-color: #2d5ba3;  color: white;}form label:active,form button:active {  background-color: #0d3f8f;  color: white;}

Esto es similar a lo que hemos visto antes: nada especial que comentar.

A continuación, vamos a recorrer el JavaScript.

En las primeras líneas del script, obtenemos referencias alinput del formulario y al elemento<div> con la clase.preview. Luego, ocultamos el elemento<input>; hacemos esto porque los inputs de archivos tienden a ser feos, difíciles de estilizar e inconsistentes en su diseño a través de los navegadores. Puedes activar el elementoinput haciendo clic en suetiqueta, por lo que es mejor ocultar visualmente elinput y estilizar la etiqueta como un botón, para que el usuario sepa que debe interactuar con ella si quiere subir archivos.

const input = document.querySelector("input");const preview = document.querySelector(".preview");input.style.opacity = 0;

A continuación, añadimos undetector de eventos alinput para detectar cambios en su valor seleccionado (en este caso, cuando se seleccionan archivos). El detector de eventos invoca nuestra función personalizadaupdateImageDisplay().

input.addEventListener("change", updateImageDisplay);

Cada vez que se invoca la funciónupdateImageDisplay(), nosotros:

• Usamos un buclewhile para vaciar el contenido anterior del<div> de previsualización.

• Obtenemos el objetoFileList que contiene la información sobre todos los archivos seleccionados y lo almacenamos en una variable llamadacurFiles.

• Comprobamos si no se seleccionaron archivos, verificando sicurFiles.length es igual a 0. Si es así, imprimimos un mensaje en el<div> de previsualización indicando que no se han seleccionado archivos.

• Si se han seleccionado archivos, iteramos a través de cada uno, imprimiendo información sobre él en el<div> de previsualización. Cosas a notar aquí:

• Usamos la función personalizadavalidFileType() para verificar si el archivo es del tipo correcto (por ejemplo, los tipos de imagen especificados en el atributoaccept).

• Si lo es, nosotros:

  • Imprimimos su nombre y tamaño en un elemento de lista dentro del<div> de previsualización (obtenido defile.name yfile.size). La función personalizadareturnFileSize() devuelve una versión bien formateada del tamaño en bytes/KB/MB (por defecto, el navegador informa el tamaño en bytes absolutos).
  • Generamos una vista previa en miniatura de la imagen llamando aURL.createObjectURL(file). Luego, insertamos la imagen en el elemento de lista también creando un nuevo<img> y estableciendo susrc en la miniatura.

• Si el tipo de archivo es inválido, mostramos un mensaje dentro de un elemento de lista diciendo al usuario que necesita seleccionar un tipo de archivo diferente.

function updateImageDisplay() {  while (preview.firstChild) {    preview.removeChild(preview.firstChild);  }  const curFiles = input.files;  if (curFiles.length === 0) {    const para = document.createElement("p");    para.textContent = "No hay archivos seleccionados actualmente para subir";    preview.appendChild(para);  } else {    const list = document.createElement("ol");    preview.appendChild(list);    for (const file of curFiles) {      const listItem = document.createElement("li");      const para = document.createElement("p");      if (validFileType(file)) {        para.textContent = `Nombre del archivo ${file.name}, tamaño del archivo ${returnFileSize(          file.size,        )}.`;        const image = document.createElement("img");        image.src = URL.createObjectURL(file);        image.alt = image.title = file.name;        listItem.appendChild(image);        listItem.appendChild(para);      } else {        para.textContent = `Nombre del archivo ${file.name}: Tipo de archivo no válido. Actualiza tu selección.`;        listItem.appendChild(para);      }      list.appendChild(listItem);    }  }}

La función personalizadavalidFileType() toma un objetoFile como parámetro, luego usaArray.prototype.includes() para verificar si algún valor enfileTypes coincide con la propiedadtype del archivo. Si se encuentra una coincidencia, la función devuelvetrue. Si no se encuentra ninguna coincidencia, devuelvefalse.

// https://developer.mozilla.org/es/docs/Web/Media/Formats/Image_typesconst fileTypes = [  "image/apng",  "image/bmp",  "image/gif",  "image/jpeg",  "image/pjpeg",  "image/png",  "image/svg+xml",  "image/tiff",  "image/webp",  "image/x-icon",];function validFileType(file) {  return fileTypes.includes(file.type);}

La funciónreturnFileSize() toma un número (de bytes, tomado de la propiedadsize del archivo actual), y lo convierte en un tamaño bien formateado en bytes/KB/MB.

function returnFileSize(number) {  if (number < 1e3) {    return `${number} bytes`;  } else if (number >= 1e3 && number < 1e6) {    return `${(number / 1e3).toFixed(1)} KB`;  } else {    return `${(number / 1e6).toFixed(1)} MB`;  }}

const button = document.querySelector("form button");button.addEventListener("click", (e) => {  e.preventDefault();  const para = document.createElement("p");  para.append("Image uploaded!");  preview.replaceChildren(para);});

El ejemplo se ve así; juegue:

Resumen técnico

Especificaciones

Compatibilidad con navegadores

Véase también

• Uso de archivos de aplicaciones web: contiene una serie de otros ejemplos útiles relacionados con<input type="file"> y laAPI de archivos.
• Compatibilidad de propiedades CSS