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()
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