mozilla
Vos résultats de recherche

    FileReader

    L'objet FileReader permet aux applications Web de lire, de manière asynchrone, le contenu des fichiers (ou des tampons de données brutes) stockés sur l'ordinateur de l'utilisateur en utilisant des objets File ou Blob pour spécifier le fichier ou les données à lire. Les fichiers objet peuvent être obtenus soit à partir d'un objet FileList qui est le resultat retourné par  la selection d'un ou plusieurs fichiers en utilisant l'élément <input> de type file, soit à partir d'un objet glisser-déposer par l'ntermediaire de DataTransfer.

    Pour créer un FileReader, il suffit de faire comme ceci:

    var reader = new FileReader();
    

    Voir Utilisation de fichiers issus d'applications web pour les détails et exemples.

    Note importante sur les paramètres d'entrée

    Notez que dans Gecko 1.9.2  (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0) et antérieurs à Firefox 4, cette interface utilise un objet File pour spécifier les fichiers; la spécification utilise des objets Blob. À partir de Gecko 2.0 (beta 7) (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), l'implémentation correspond aux spécifications. Cela peut entraîner quelques changements nécessaires pour votre code, surtout si vous avez utilisé le système non-standard de la méthode spécifique à Mozilla sur l'objet File qui a été depuis dépréciée.

    Autre élément d'importance, un fichier ainsi chargé dans la page se retrouve stoké dans la mémoire de l'ordinateur.

    Aperçu de la methode

    Gecko 1.9.2 note

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    À partir de Gecko 2.0 beta 7 (Firefox 4.0 bêta 7), tout a été mis à jour pour correspondre à la spécification correctement.

    void abort();
    void readAsArrayBuffer(in Blob blob);
    void readAsBinaryString(in Blob blob);
    void readAsDataURL(in Blob file);
    void readAsText(in Blob blob, [optional] in DOMString encoding);

     Constantes d'état

    Constant Value Description
    EMPTY 0 Aucune donnée n'a encore été chargée.
    LOADING 1 Les données sont en cours de chargement.
    DONE 2 La demande de lecture a été entièrement achevée.

    Propriété

    Proprieté Type Description
    error FileError une erreur  s'est produite durant la lecture du fichier. Lecture seule
    readyState unsigned short Indique l'état du FileReader. Ce sera l'une des constantes de l'état. Lecture seule
    result il s'agit du contenu du fichier. Cette propriété est seulement valable une fois que l'opération de lecture est terminée, et le format des données dépend de la méthode utilisée pour lancer l'opération de lecture. Lecture seule

    Methodes

    abort()

    Abandon de l'opération de lecture. l'etat de readyState sera DONE.

    void abort();
    
    Parametres

    None.

    Les exceptions levées
    DOM_FILE_ABORT_ERR
    abort() a été appelé alors qu'aucune opération de lecture n'est en cours (qui est, l'Etat n'a pas de chargement).)
     

    readAsArrayBuffer()

    Démarre la lecture du contenu de la resource specificifié en tant que donné Blob qui peut être un fichier. Lorsque l'opération de lecture est terminée, l'etat de readyState deviendra DONE, et onloadend sera le cas échéant appelée. A ce moment, l'attribut result contient un ArrayBuffer représentant les données du fichier courant. S'utilise conjointement avec DataView.

    void readAsArrayBuffer(
      in Blob blob
    );
    
    Parametres
    blob
    L'objet Blob ou File à lire.
     

    readAsBinaryString()

    Démarre la lecture du contenu de la resource spécifiée en tant que donnée Blob qui peut être un fichier. Lorsque l'opération de lecture est terminée, l'état readyState deviendra DONE, et l'évènement onloadend sera déclenché. À ce moment, la clé result  du file reader contient les données binaires brutes du fichier qui a été chargé.

    void readAsBinaryString(
      in Blob blob
    );
    
    Parametres
    blob
    L'objet Blob ou File à lire.
     

    readAsDataURL()

    Démarre la lecture du contenu de la resource spécifiée. Lorsque l'opération de lecture est terminée, l'etat de readyState deviendra DONE, et onloadend sera le cas échéant appelée. A ce moment, l'attribut result contient un ensemble de données: URL représentant les données du fichier courant en base64.

     

    void readAsDataURL(
      in Blob file
    );
    

    Cette méthode est utile, par exemple, pour obtenir un aperçu d'une image avant l'upload:

    <!doctype html>
    <html>
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>Image preview example</title>
    <style type="text/css">
    
    .box{
    position:absolute;
    	background-color:gray;
    height:200px;width:250px;
    	margin-top:120px;
    	margin-left:500px;
    border:1px ridge #aaa;
    	-moz-box-shadow: 10px 10px 10px #212121;
    	-webkit-box-shadow: 10px 10px 10px #212121;
    	box-shadow: 10px 10px 10px #616161;
    }
    
    img{
    width:6em;
    }
    
    </style>
    
    <script type="text/javascript">
    
    var compteur=0
    
    function dragenter(e) {
    	e.stopPropagation();
    	e.preventDefault();
    }
    
    function drop(e) {
    
    	if (!e) {
    		var fichier = document.getElementById('fileinput').files;
    	}
    	else {
    		var fichier = e.dataTransfer.files;
    	}
    	chacharge(fichier)
    }
    
    
    function chacharge(fichier){
    	
    	if (fichier[compteur].type.match('image.*')){
    	
    		var construction=document.createElement('img')
    		var elmage= document.body.appendChild(construction);
    		
    		var charge=new FileReader();
    		
    		charge.readAsDataURL(fichier[compteur]);
    		
    		charge.onloadend = function(e){
    			
    			elmage.src = e.target.result;
    			
    			if (compteur<fichier.length-1) {
    				compteur++;
    				chacharge(fichier);
    			}
    			else{
    				compteur=0;
    			}
    		}
    	}
    
    	else{
    		if (compteur<fichier.length-1) {
    			compteur++;
    			chacharge(fichier);
    		}
    	}
    }
    </script>
    </head>
    <body>
    <div class='box' ondragenter="this.textContent = ''; dragenter(event)" ondragover="dragenter(event)" ondrop="dragenter(event); drop(event);">deplacez les elements a cette endroit.</div>
    <br>
    <input type='file' id='fileinput' multiple='multiple' onchange='drop()'>
    </body>
    </html>
    
    Parameters
    file
    L'objet Blob a décoder
     

    readAsText()

    Démarre la lecture du contenu de la resource specificifié. Lorsque l'opération de lecture est terminée, l'etat de readyState deviendra DONE, et onloadend sera le cas échéant appelée. A ce moment, l'attribut result contient l' ensemble des données du fichier courant en tant que chaîne de caractère.

    void readAsText(
      in Blob blob,
      in DOMString encoding Facultatif
    );
    
    Parametres
    blob
    L'objet Blob a décoder.
    encodage
    Une chaîne indiquant le codage à utiliser pour les données renvoyées. Par défaut, UTF-8 si le paramètre n'est pas spécifié.
     

    Evenements

    onabort
    Appelé lorsque l'opération de lecture est interrompue.
    onerror
    Appelé quand une erreur survient.
    onload
    Appelé lorsque l'opération de lecture s'est terminée avec succès.
    onloadend
    Appelé lorsque la lecture est terminée, qu'elle soit réussie ou non. est appelé après onload ou onerror.
    onloadstart
    Appelé lorsque la lecture des données est sur ​​le point de commencer.
    onprogress
    Appelé régulièrement durant la lecture des données.

    compatibilité entre navigateurs

    table de compatibilité

    Feature Firefox (Gecko) Chrome Internet Explorer* Opera* Safari
    Basic support 3.6 (1.9.2) 7 10 11.10 sans drag&drop  

    *IE9 voir File API Lab. Opera has support partiel in 11.10.

    autres liens

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: Laowai, tregagnon, fabien, mekal, Jack_Duthen, teoli, emersion
    Dernière mise à jour par : fabien,