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
À 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 |
void readAsBinaryString(in |
void readAsDataURL(in |
void readAsText(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
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
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
à décoderBlob
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
a décoder.Blob
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
ouonerror
. 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.