Lire les fichiers

Parent Previous Next


Lire les fichiers



Comme précisé précédemment, nous allons aborder la lecture des fichiers grâce à l'objet FileReader. Son instanciation s'effectue sans aucun argument :

var reader = new FileReader();


Cet objet permet la lecture asynchrone de fichiers, et ce grâce à trois méthodes différentes :

Nom

Description

readAsArrayBuffer()

Stocke les données dans un objet de type ArrayBuffer. Ces objets ont été conçus pour permettre l'écriture et la lecture de données binaires directement dans leur forme native, ils sont surtout utilisés dans des domaines exigeants tels que le WebGL. Il y a peu de chances pour que vous utilisiez un jour cette méthode.

readAsDataURL()

Les données sont converties dans un format nommé DataURL. Ce format consiste à convertir toutes les données binaires d'un fichier en base64 pour ensuite stocker le résultat dans une chaîne de caractères. Cette dernière est complétée par la spécification du type MIME du fichier concerné. Les DataURL permettent donc de stocker un fichier sous forme d'une URL lisible par les navigateurs récents, leur utilisation est de plus en plus fréquente sur le Web.

readAsText()

Les données ne subissent aucune modification, elles sont tout simplement lues puis stockées sous forme d'une chaîne de caractères.


Si vous allez consulter la documentation du MDN au sujet de l'objet FileReader, vous constaterez alors qu'il existe une méthode supplémentaire nommée readAsBinaryString(). Nous n'en avons pas parlé, car il se trouve qu'elle est déjà dépréciée par le W3C.


Ces trois méthodes prennent chacune en paramètre un argument de type Blob ou File. La méthode readAsText() possède un argument supplémentaire (et facultatif) permettant de spécifier l'encodage du fichier, qui s'utilise comme ceci :

reader.readAsText(file, 'UTF-8');

reader.readAsText(file, 'ISO-8859-1');


Avant d'utiliser l'une de ces méthodes, rappelez-vous que nous avons bien précisé que la lecture d'un fichier est asynchrone ! Il faut donc partir du principe que vous allez avoir plusieurs événements à votre disposition. Ces événements diffèrent peu de ceux que l'on rencontre avec la seconde version de l'objetXMLHttpRequest :

Nom

Description

loadstart

La lecture vient de commencer.

progress

Tout comme avec les objets XHR, l'événement progress se déclenche à intervalles réguliers durant la progression de la lecture. Il fournit, lui aussi, un objet en paramètre possédant deux propriétés, loaded et total, indiquant respectivement le nombre d'octets lus et le nombre d'octets à lire en tout.

load

La lecture vient de se terminer avec succès.

loadend

La lecture vient de se terminer (avec ou sans succès).

abort

Se déclenche quand la lecture est interrompue (avec la méthode abort() par exemple).

error

Se déclenche quand une erreur a été rencontrée. La propriété error contiendra alors un objet de type FileError pouvant vous fournir plus d'informations.


Une fois les données lues, il ne vous reste plus qu'à les récupérer dans la propriété result. Ainsi, afin de lire un fichier texte, vous n'avez qu'à faire comme ceci :

<input id="file" type="file" />

 

<script>

var fileInput = document.querySelector('#file');

 

fileInput.onchange = function() {

 

    var reader = new FileReader();

 

    reader.onload = function() {

        alert('Contenu du fichier "' + fileInput.files[0].name + '" :\n\n' + reader.result);

    };

 

    reader.readAsText(fileInput.files[0]);

 

};

</script>


Pour finir sur la lecture des fichiers, sachez que l'objet FileReader possède aussi une propriété readyState permettant de connaître l'état de la lecture. Il existe trois états différents représentés par des constantes spécifiques aux objets FileReader :

Constante

Valeur

Description

EMPTY

0

Aucune donnée n'a encore été chargée.

LOADING

1

Les données sont en cours de chargement.

DONE

2

Toutes les données ont été chargées.


Tout comme avec un objet XHR, vous pouvez vérifier l'état de la lecture, soit avec la constante :

if(reader.readyState == reader.LOADING) {

  // La lecture est en cours...

}


soit directement avec la valeur de la constante :

if(reader.readyState == 1) {

  // La lecture est en cours...

}


Créé avec HelpNDoc Personal Edition: Produire des livres électroniques facilement

Site à deux balles