FileList

Un objet FileList est renvoyé par la propriété files d'un élément HTML <input>. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément <input type="file">. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'API Drag & Drop (voir l'objet DataTransfer pour plus de détails).

Utiliser une liste de fichiers

Tous les éléments <input> possèdent un attribut files de type FileList qui permet d'accéder aux éléments de cette liste. Ainsi, si le code HTML utilisé est :

<input id="fileItem" type="file">

On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet File :

var file = document.getElementById('fileItem').files[0]

Propriétés

Attribut Type Description
length integer Une valeur en lecture seule qui indique le nombre de fichier dans la liste.

Méthodes

item()

Cette méthode renvoie un objet File qui représente le fichier à l'indice fourni.

File item(
  index
);

Paramètres

index

Un indice (commençant à partir de zéro) indiquant le fichier qu'on souhaite récupérer de la liste.

Valeur de retour

L'objet File qui représente le fichier demandé.

Exemples

Dans cet exemple, on parcourt l'ensemble des fichiers sélectionnés par l'utilisateur via un élément <input> :

// fileInput est un élément HTML input : <input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");

// files est un objet FileList (semblable à NodeList)
var files = fileInput.files;
var file;

// on parcourt les fichiers
for (var i = 0; i < files.length; i++) {
    // on récupère le i-ème fichier
    file = files.item(i);
    // ou encore
    file = files[i];
    console.log(file.name);
}

Exemple complet

HTML

<input id="myfiles" multiple type="file">

JavaScript

var recupererFichiers = function() {
  var fichiersInput = document.querySelector("#myFiles");
  var fichiers = fichiersInput.files;

  var nbFichiers = fichiers.length;
  var i = 0;
  while(i < nbFichiers){
    var fichier = fichiers[i];
    console.log(fichier.name);
    i++;
  }
}

// On invoque cette fonction pour chaque modification apportée à l'élément
// input
document.querySelector("#myFiles").onchange = recupererFichiers;

Résultat

Spécifications

Specification
File API
# filelist-section
HTML Standard
# dom-input-files-dev

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi