Comment mettre en œuvre la Barre de Progression et des Rappels avec async nature de la FileReader

J'ai le FileReader API appelée dans une boucle for pour parcourir de multiples objets de fichier. Je suis en utilisant FileReader essentiellement à l'affichage de l'aperçu des images.

function() {
    for (var i in Files) {
        var fileReader = new FileReader();
        fileReader.readAsBinaryString(Files[i]);
        fileReader.onload = function() {

            //do something on FileReader onload

        }

        fileReader.onprogress = function(data) {
            if (data.lengthComputable) {                                            
                var progress = parseInt( ((data.loaded / data.total) * 100), 10 );
                console.log(progress);
            }
        }
    }

    //do something on completion of FileReader process
    //actions here run before completion of FileReader
}

Je me suis heurtée à deux problèmes en raison de la nature asynchrone de la FileReader API. Tout d'abord, le onprogress événement se déclenche pour chaque FileReader instance. Cela me donne beaucoup de progrès pour chaque fichier. Alors que, j'ai l'intention d'afficher le total des progrès de tous les fichiers au lieu de fichiers individuels.

Deuxièmement, je veux effectuer des actions qui ne devrait être effectuée que lorsque toutes les instances (un pour chaque fichier) de la FileReader avez terminé. Actuellement, depuis FileReader fonctionne en mode asynchrone, les actions à exécuter avant d'FileReader complète de la tâche. J'ai beaucoup cherché et encore pour trouver une solution à ces problèmes. Toute aide est appréciée.

InformationsquelleAutor John | 2013-05-08
  1. 17

    Nous allons répondre à votre deuxième problème en premier lieu. Vous devez définir votre après l'achèvement de code dans une fonction distincte, et appeler cette fonction une fois que tous les fichiers téléchargés:

    function() {
    var total = Files.length; loaded = 0;
    for (var i in Files) {
        var fileReader = new FileReader();
        fileReader.readAsBinaryString(Files[i]);
        fileReader.onload = function() {

            //do something on FileReader onload
            loaded++;

            if (loaded == total){
                onAllFilesLoaded();
            }
        }

        fileReader.onprogress = function(data) {
            if (data.lengthComputable) {                                            
                var progress = parseInt( ((data.loaded / data.total) * 100), 10 );
                console.log(progress);
            }
        }
    }
}

function onAllFilesLoaded(){
    //do stuff with files
}

    Maintenant, pour le suivi des progrès, il ya un couple de différentes manières que vous pourriez adresse. Droit maintenant, vous êtes le chargement de tous les fichiers à la fois, et chaque fichier est à rendre compte de ses propres progrès. Si vous n'avez pas l'esprit de moins en moins fréquentes mises à jour, vous pouvez simplement utiliser le gestionnaire onload de faire rapport chaque fois qu'un fichier est chargé. Si vous voulez vraiment fine, précise le progrès des mises à jour, vous allez avoir à calculer la taille totale de tous les fichiers combinés, de garder trace de combien de chaque fichier a été chargé, et utiliser la somme de ce qui s'est chargé pour chaque fichier par rapport à la taille totale de tous les fichiers de rapport de progrès.

    Sinon, en supposant que vous êtes à la mise en œuvre de ce avec une barre de progression plutôt que de la console.journal, vous pouvez fournir une distinct de la barre de progression pour chaque fichier en cours de téléchargement, et de calculer la progression pour chaque fichier exactement comme vous le faites maintenant, pour ensuite mettre à jour le correspondant de la barre de progression. Laissez-moi savoir si ce besoin de clarification.

    • À seulement quelques minutes en arrière j'ai mis en place cette solution et revint à cette question pour savoir qu'il vous est arrivé de suggérer exactement ce que j'ai mis en place. Pour le progrès je n'ai pas besoin granulaire valeurs. J'ai donc fini par le calcul de la progression que var progress = parseInt( ((loaded / totalNumberOfFiles) * 100), 10 );. Merci pour l'aide.
    • super, j'espère que cela va aider un peu pour les autres aussi.
    InformationsquelleAutor undefined