mozilla
Vos résultats de recherche

    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

    Voir aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: tregagnon, teoli, Goofy, mekal
    Dernière mise à jour par : mekal,