HTMLInputElement : propriété 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.

La propriété files de l'interface HTMLInputElement permet d'accéder à la FileList sélectionnée avec l'élément HTML <input type="file">.

Dans cet article

Valeur

Un objet FileList listant les fichiers sélectionnés, le cas échéant, ou null si HTMLInputElement n'est pas de type="file".

L'exemple ci-dessous montre comment accéder à la propriété HTMLInputElement.files et afficher le nom, la date de modification, la taille et le type de chaque fichier sélectionné par l'utilisateur·ice.

HTML

html

JavaScript

Notez que HTMLInputElement.files retourne toujours une instance de FileList, même si aucun fichier n'est sélectionné. Il est donc possible d'itérer dessus avec for...of sans vérifier si des fichiers sont sélectionnés.

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

console.log(fileInput.files instanceof FileList); // true même 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
}