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

Spécification État Commentaires
File API
La définition de 'FileList' dans cette spécification.
Version de travail
HTML Living Standard
La définition de 'selected files' dans cette spécification.
Standard évolutif

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
FileListChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE ? Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
itemChrome Support complet OuiEdge Support complet 12Firefox Support complet OuiIE ? Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
lengthChrome Support complet OuiEdge Support complet 12Firefox Support complet OuiIE ? Opera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi