FileList

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);
ou
 File[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)