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

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 jsval 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 :

<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é

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 : 
 Dernière mise à jour par : EmmanuelBeziat,