HTMLInputElement : proprit files

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilit complte

La proprit files de l'interface HTMLInputElement permet d'accder la FileList slectionne avec l'lment HTML <input type="file">.

Valeur

Un objet FileList listant les fichiers slectionns, le cas chant, ou null si HTMLInputElement n'est pas de type="file".

Exemples

L'exemple ci-dessous montre comment accder la proprit HTMLInputElement.files et afficher le nom, la date de modification, la taille et le type de chaque fichier slectionn par l'utilisateurice.

HTML

html

<input id="files" type="file" multiple />

Notez que HTMLInputElement.files retourne toujours une instance de FileList, mme si aucun fichier n'est slectionn. Il est donc possible d'itrer dessus avec for...of sans vrifier si des fichiers sont slectionns.

const fileInput = document.getElementById("files");

console.log(fileInput.files instanceof FileList); // true mme si vide

for (const file of fileInput.files) {
  console.log(file.name); // affiche le nom du fichier
  let fileDate = new Date(file.lastModified);
  console.log(fileDate.toLocaleDateString()); // affiche la date lisible
  console.log(
    file.size < 1000 ? file.size : `${Math.round(file.size / 1000)}KB`,
  );
  console.log(file.type); // affiche le type MIME
}