initial commit

1 files changed, 152 insertions, 0 deletions

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
+---
+<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Un objet <strong><code>FileList</code></strong> est renvoyé par la propriété <code>files</code> d'un élément HTML {{HTMLElement("input")}}. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément <code>&lt;input type="file"&gt;</code>. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API Drag &amp; Drop</a> (voir l'objet <a href="/fr/docs/Web/API/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> pour plus de détails).</p>
+
+<h2 id="Utiliser_une_liste_de_fichiers">Utiliser une liste de fichiers</h2>
+
+<p>Tous les éléments <code>&lt;input&gt;</code> possèdent un attribut <code>files</code> de type <code>FileList</code> qui permet d'accéder aux éléments de cette liste. Ainsi, si le code HTML utilisé est :</p>
+
+<pre>&lt;input id="fileItem" type="file"&gt;
+</pre>
+
+<p>On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> :</p>
+
+<pre class="brush: js">var file = document.getElementById('fileItem').files[0]</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribut</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>length</code></td>
+   <td><code>integer</code></td>
+   <td>Une valeur en lecture seule qui indique le nombre de fichier dans la liste.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="item()"><code>item()</code></h3>
+
+<p>Cette méthode renvoie un objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> qui représente le fichier à l'indice fourni.</p>
+
+<pre> File item(
+   index
+ );
+</pre>
+
+<h4 id="Paramètres">Paramètres</h4>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Un indice (commençant à partir de zéro) indiquant le fichier qu'on souhaite récupérer de la liste.</dd>
+</dl>
+
+<h4 id="Valeur_de_retour">Valeur de retour</h4>
+
+<p>L'objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> qui représente le fichier demandé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on parcourt l'ensemble des fichiers sélectionnés par l'utilisateur via un élément {{HTMLElement("input")}} :</p>
+
+<pre class="brush:js">// fileInput est un élément HTML input : &lt;input type="file" id="myfileinput" multiple&gt;
+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 &lt; files.length; i++) {
+    // on récupère le i-ème fichier
+    file = files.item(i);
+    // ou encore
+    file = files[i];
+    console.log(file.name);
+}
+</pre>
+
+<h3 id="Exemple_complet">Exemple complet</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input id="myfiles" multiple type="file"&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var recupererFichiers = function() {
+  var fichiersInput = document.querySelector("#myFiles");
+  var fichiers = fichiersInput.files;
+
+  var nbFichiers = fichiers.length;
+  var i = 0;
+  while(i &lt; 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;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_complet")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#filelist-section', 'FileList')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FileList")}}</p>
+
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications" title="Using files from web applications">Utiliser des fichiers dans des applications web</a></li>
+ <li><code><a href="/fr/docs/Web/API/File" title="DOM/File">File</a></code></li>
+ <li><code><a href="/fr/docs/Web/API/FileReader" title="DOM/FileReader">FileReader</a></code></li>
+</ul>