From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/filelist/index.html | 152 +++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 files/fr/web/api/filelist/index.html (limited to 'files/fr/web/api/filelist/index.html') diff --git a/files/fr/web/api/filelist/index.html b/files/fr/web/api/filelist/index.html new file mode 100644 index 0000000000..286acf16bc --- /dev/null +++ b/files/fr/web/api/filelist/index.html @@ -0,0 +1,152 @@ +--- +title: FileList +slug: Web/API/FileList +tags: + - API + - File API + - Files +translation_of: Web/API/FileList +--- +
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
+ +

Un objet FileList est renvoyé par la propriété files d'un élément HTML {{HTMLElement("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

+ + + + + + + + + + + + + + +
AttributTypeDescription
lengthintegerUne 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 {{HTMLElement("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

+ +

{{EmbedLiveSample("Exemple_complet")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('File API', '#filelist-section', 'FileList')}}{{Spec2('File API')}}
{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FileList")}}

+ + + +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf