FileList

par 4 contributeurs :

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

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : teoli, mekal, Goofy, tregagnon
Dernière mise à jour par : mekal,