Discussion :

[fabrice91]

Bonjour,

Je ne comprends pas bien comment fonctionne FileReader.
J'ai lu plusieurs doc et tutos, vu des exemples descriptifs mais pas explicatifs !
Cela se borne à dire de "faire comme ça" et c'est tout, sans aller dans l'explication du mécanisme. Bon, je me doute que c'est de ma faute, mais je ne sais pas ou chercher !!!
Voici un exemple de mon code pour lire un fichier en local :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function verif_file() {
        var fileInput = document.querySelector('#fichier');
        var reader = new FileReader();
        reader.onload = function() { alert(reader.result) ; ret=reader.result}
        reader.readAsText(fileInput.files[0]);
        alert(ret) ;
        return false ;
}

Lorsque je choisis un fichier et que se lance la fonction verif_file(), le premier "alert()" dans le reader.onload me donne ce que je veut mais l'affectation à ret ne fonctionne pas car le alert(ret) me rend ensuite une chaine vide !
Je me dis que l'objet ret n'est pas connu dans la fonction donc je fais un var ret = "" avant d'appeler reader.onload() mais même résultat. J'ai essayé de déclarer le ret en global en dehors de toute fonction mais pareil !
Je ne comprend pas comment récupérer ret en dehors du reader.onload() !
Je pense qu'il s'agit d'une closure on un truc comme ça mais je n'arrive pas à voir comment cela fonctionne.
Merci !

[devyan]

Bonjour,

As-tu essayé d'inverser ta séquence en affectant d'abord ret ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ret=reader.result; alert(res);

Sinon, es-tu certain que reader.readAsText() a un fonctionnement synchrone et donc que reader.onload() est bien exécuté avant ton alert(ret) de la ligne 6 ?

devyan

[fabrice91]

oui, j'ai interverti en affectant d'abord la variable puis en faisant un alert sur la variable dans la fonction onload() et j'ai le bon comportement.
Pour la méthode onload() sur un obje de type FileReader il est dit :

onload
Called when the read operation is successfully completed.

Donc cette fonction est appelée une fois que le reader.readAsText() a été fait avec succès.

[devyan]

Oui elle est exécutée une fois le fichier lu mais la question était de savoir si pendant la lecture du fichier l'exécution du code s'arrête ou si tu risque de demander d'afficher "ret" alors qu'elle n'a pas encore été initialisée par [codeinline]reader.onload()[codeinline].

devyan.

[fabrice91]

Hmmmm, je vois, je ne sais pas...
En fait j'essaye de reproduire un peu ceci (exemple pour afficher des miniatures)
Bon, en fait je ne veux pas afficher de miniatures mais à la place je veux tout de même modifier le DOM. Je récupère la valeur d'un champ input avec un getElementById, je modifie ensuite cette valeur dans le onload() mais en sortant, l'élément n'a pas été modifié ! il garde son ancienne valeur...
J'ai recopié le code comme l'exemple ci dessus en modifiant ma fonction mais lorsque j'envoie mon formulaire, l'input n'a pas été changé...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function verif_file() {
    var fileInput = document.querySelector('#fichier');
        var reader = new FileReader();
        reader.onload = (function() {
            return function(e) {
                document.getElementById('input1').value = e.target.result ;
            };
        })(f);
        var f=fileInput.files[0] ;
        reader.readAsText(f);
        return true ;
}

Mon element input1 a comme valeur "toto" au départ dans mon DOM au chargement de la page.
Lors du clic sur le bouton de soumission lors du choix du fichier, la fonction onload() devrait le modifier pour lui faire prendre la valeur contenue dans le fichier ("titi") : mais une fois mon formulaire soumis et que je récupère mes paramètres, j'ai toujours "toto" comme valeur et pas "titi" !
Alors que si je vais un alert(e.target.result) dans mon onload(), je vois effectivement "titi" : j'en conclus que tout se passe correctement dans la fonction mais en sortant de la fonction, c'est comme si rien ne s'était passé.
Là, j'ai pourtant repris l'exemple tel quel en l'adaptant à mes besoins...

[thelvin]

Ça s'appelle de la programmation asynchrone.

En résumé, cette fonction onload n'est pas là pour faire joli.
Elle est appelée quand le fichier a été correctement chargé.

Ce qui signifie, évidemment, que tout le reste se fait à un autre moment que quand le fichier a été chargé.
readAsText() lance la lecture du fichier, mais il n'attend pas que ce soit fini. Ce n'est pas son problème. L'exécution continue, et à ce moment-là la lecture du fichier a tout juste commencé depuis quelques nanosecondes. onload n'a donc pas été appelé et tout ce qui va être fait par onload n'est pas encore fait.

La raison en est simple : supposons que le fichier soit sur un réseau ou fasse plusieurs mégas. Le lire prend alors plusieurs secondes. Le JavaScript ne peut pas se permettre de durer plusieurs secondes d'exécution, cela bloquerait complètement la page.
Alors à la place, le travail se fait en arrière-plan, et une fonction JavaScript est appelée quand il est fini.