Un objet de ce type est retourné par la propriété files, ce qui vous permet d'accéder à la liste des fichiers sélectionnés avec l'élément <input type="file">.ou en utilisant l'API de glisser-déposer ; voir l'objet DataTransfer pour plus de détails sur cette utilisation.
Avant Gecko 1.9.2, l'élément d'entrée prenait en charge un seul fichier sélectionné à la fois, ce qui signifie que la liste des fichiers devait contenir un seul fichier, on ne pouvait pas faire une sélection multiple de fichiers. À partir de Gecko 1.9.2, l'attribut multiple de l'élément input est possible, la FileList peut donc contenir plusieurs fichiers.
Methodes
item() ou [ ]
Renvoie un objet File représentant le fichier à l'index spécifié dans la liste des fichiers.
File item(index); ouFile[index];
Parameters
-
index - L'indice de la liste qui commance a zéro
Return value
le File représentant le fichier demandé.
Proprietés
| Proprieté | Type | Description |
length |
integer |
Une valeur indiquant le nombre de fichiers contenu dans la liste (fichiers selectionnés). lecture seule. |
| name | DOMString |
le nom du fichier courant. lecture seule. |
| size | unsigned long long |
la taille en octets du fichier courant. lecture seule. |
| type | DOMString |
le type (MIME type) du fichier courant . lecture seule. |
Exemple
Les lignes de code suivantes vont d'abord donner le nombre de fichiers selectionnés puis par l'intermédiaire d'une boucle parcourir tous les fichiers repertoriés par file et donner pour chacun d'eux la taille, le type et le nom :
<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
.box{
position:absolute;
background-color:gray;
height:200px;width:250px;
margin-top:120px;
margin-left:600px;
border:1px ridge #aaa;
-moz-box-shadow: 10px 10px 10px #212121;
-webkit-box-shadow: 10px 10px 10px #212121;
box-shadow: 10px 10px 10px #616161;
}
table td{
border:2px;
border-style:solid;
}
</style>
<script type="text/javascript">
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
if (!e) {
var fichier = document.getElementById('fileinput').files;
}
else {
var fichier = e.dataTransfer.files;
}
document.getElementById('nbfic').value=fichier.length
for(var j=0;j<fichier.length;j++){
var tbrow=document.getElementById("tabs").insertRow(-1)
tbrow.insertCell(0)
var zozo=document.createTextNode(fichier[j].size)
tbrow.cells[0].appendChild(zozo);
tbrow.insertCell(1)
var zozo=document.createTextNode(fichier[j].name)
tbrow.cells[1].appendChild(zozo);
tbrow.insertCell(2)
var zozo=document.createTextNode(fichier[j].type)
tbrow.cells[2].appendChild(zozo);
}
}
</script>
</head>
<body>
<div id='dropbox' class='box' ondragenter="this.textContent = '';dragenter(event)"
ondragover="dragenter(event)"
ondrop="dragenter(event); drop(event);"></div>
<input type='file' multiple="multiple" id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='drop();'>
<br>
nbr de fichier<input type='text' id='nbfic'>
<br>
<table id='tabs'>
<tr>
<td>taille de fichier</td>
<td>nom de fichier</td>
<td>type de fichier</td>
</tr>
<tbody>
</tbody>
</table>
</body>
</html>Spécification
- File upload state (HTML 5 working draft)