blob: a1749e409912e88ab56f8ae288240e4b4586cf9f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
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><input type="file"></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 & 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><input></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><input id="fileItem" type="file">
</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 : <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);
}
</pre>
<h3 id="Exemple_complet">Exemple complet</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><input id="myfiles" multiple type="file"></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 < 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>
<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>
|
