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'intermediaire 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

 Constantes d'état

Propriété

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 :

<div class="box" ondragenter="this.textContent = ''; dragenter(event)" ondragover="dragenter(event)" ondrop="dragenter(event); drop(event);">deplacez les elements à cet endroit.</div>

<input type="file" id="fileinput" multiple="multiple" onchange="drop()">

.box {
    background-color: gray;
    height: 200px;
    width: 250px;
    margin-top: 120px;
    margin-left: 500px;
    border: 1px ridge #aaa;
    box-shadow: 10px 10px 10px #616161;
}

img {
    width: 6em;
}

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);
        }
    }
}

Parameters

file

L'objet Blob à 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é

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

autres liens

• File
• Filelist
• Specification: File API: FileReaderWD
• Using files from web applications