FileList

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

On pourra obtenir un objet de typeFileList grâce à la propriétéfiles d'un objetHTMLInputElement (qui représente un élément HTML<input>) du DOM. Un objetFileList permet d'accéder à la liste des fichiers sélectionnés via un élément<input type="file">. Il est également utilisé pour manipuler une liste de fichiers déposé dans du contenu web en glisser/déposer. Voirla page sur l'objetDataTransfer pour plus de détails sur ce deuxième usage.

Tous les nœuds qui sont des éléments<input> possèdent un attributfiles de typeFileList qui permet d'accéder aux éléments de cette liste. Ainsi, avec le fragment de HTML qui suit :

html

<input type="file" />

On pourra utiliser la ligne de code suivante pour récupérer le premier fichier de la liste des fichiers pour ce nœud dans un objetFile :

const file = document.getElementById("fileItem").files[0];

Note :Cette interfacese voulait une tentative de modélisation d'une liste non-modifiable et continue uniquement d'être prise en charge pour ne pas casser le code qui l'utilise encore. Les API plus récentes utilisent des types qui se basent sur le type ECMAScriptArray, afin que les objets puissent être traités comme des tableaux tout en imposant une sémantique additionnelle correspondant à leur utilisation (par exemple, en marquant leurs éléments comme étant en lecture seule).

Propriétés des instances

lengthLecture seule: Une valeur en lecture seule qui indique le nombre de fichiers dans la liste.

Méthodes des instances

item()Lecture seule: Renvoie un objetFile qui représente le fichier situé à l'indice indiqué dans la liste.

Exemple

Afficher le nom des fichiers

Dans cet exemple, nous allons afficher le nom des fichiers sélectionnés par l'utilisatrice ou l'utilisateur.

HTML

html

<input multiple type="file" /><pre>Fichiers sélectionnés :</pre>

JavaScript

const sortie = document.querySelector(".sortie");const fileInput = document.querySelector("#mesfichiers");fileInput.addEventListener("change", () => {  for (const file of fileInput.files) {    sortie.innerText += `\n${file.name}`;  }});