HTMLInputElement : propriété files

Baseline Widely available

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

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

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

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.

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
}