Javascript Promesses avec FileReader()

J'ai le Code HTML suivant:

<input type='file' multiple>

Et Voici mon Code JS:

var inputFiles = document.getElementsByTagName("input")[0];
inputFiles.onchange = function(){
    var fr = new FileReader();
    for(var i = 0; i < inputFiles.files.length; i++){
        fr.onload = function(){
            console.log(i) //Prints "0, 3, 2, 1" in case of 4 chosen files
        }
    }
    fr.readAsDataURL(inputFiles.files[i]);
}

Donc ma question est, comment puis-je faire cette boucle synchrone ? C'est d'abord attendre que le fichier à la fin du chargement, puis passer au fichier suivant. Quelqu'un m'a dit d'utiliser JS Promises. Mais je ne peux pas me rendre au travail. Voici ce que j'essaie:

var inputFiles = document.getElementsByTagName("input")[0];
inputFiles.onchange = function(){
    for(var i = 0; i < inputFiles.files.length; i++){
        var fr = new FileReader();
        var test = new Promise(function(resolve, reject){
            console.log(i) //Prints 0, 1, 2, 3 just as expected
            resolve(fr.readAsDataURL(inputFiles.files[i]));
        });
        test.then(function(){
            fr.onload = function(){
                console.log(i); //Prints only 3
            }
        });
    };
}

Merci d'avance...

Les promesses sont utilisés pour les opérations asynchrones.
Comment puis-je faire synchrone alors ? J'ai étudié sur internet, ils disent tous qu'elle rend le code synchrone
Non, promet de ne pas faire de code synchrone. Pouvez-vous point à un de ces endroits que "tous", disent-ils faire?
MDN a Dit: "Une Promesse représente un proxy pour une valeur pas nécessairement connues lorsque la promesse est créé. Il vous permet d'associer les gestionnaires à une action asynchrone de l'éventuelle valeur de succès ou de l'échec de la raison. Cela vous permet de méthodes asynchrones valeurs de retour comme les MÉTHODES SYNCHRONES":
Oui. Vous pouvez la faire se comporter de manière quasi-synchrone si par synchrones vous dire que vous pouvez contrôler l'ordre dans lequel les différentes parties de votre fichier de lecture de code sont exécutées. Mais il continue à fonctionner de manière asynchrone dans le respect de la souris, par exemple les gestionnaires ou le moteur JavaScript lui-même. "comme une méthode synchrone" n'est pas la même chose que "est une méthode synchrone".

OriginalL'auteur Zahid Saeed | 2015-12-28

Si vous voulez le faire de façon séquentielle( pas simultanément) à l'aide de Promesses, vous pourriez faire quelque chose comme:

var inputFiles = document.getElementsByTagName("input")[0];
inputFiles.onchange = function(){
  var promise = Promise.resolve();
  inputFiles.files.map( file => promise.then(()=> pFileReader(file)));
  promise.then(() => console.log('all done...'));
}

function pFileReader(file){
  return new Promise((resolve, reject) => {
    var fr = new FileReader();  
    fr.onload = resolve;  //CHANGE to whatever function you want which would eventually call resolve
    fr.readAsDataURL(file);
  });
}

vous êtes l'homme! La 2ème partie (nouvelle Promesse) est exactement ce dont j'avais besoin pour obtenir mon FileReader pour revenir comme la Promesse en tant que de besoin. Merci!!!!
J'ai eu à faire new Promise<Event>((resolve, reject) => { pour obtenir que cela fonctionne... (Besoin de l' <Event> générique.)

OriginalL'auteur mido

Nous avons modifié midos réponse à faire fonctionner le suivant:

function readFile(file){
  return new Promise((resolve, reject) => {
    var fr = new FileReader();  
    fr.onload = () => {
      resolve(fr.result )
    };
    fr.readAsText(file.blob);
  });
}

OriginalL'auteur Jens Lincke

La nature de FileReader est que vous ne pouvez pas faire son fonctionnement synchrone.

Je soupçonne que vous n'avez pas vraiment besoin ou voulez qu'il soit synchrone, c'est juste que vous voulez obtenir de l'résultant Url correctement. Si oui, je ne pense pas que les promesses qui serait vraiment utile. Au lieu de cela, il suffit de garder la trace du nombre d'opérations en cours, vous devez donc vous savez quand vous avez terminé:

var inputFiles = document.getElementsByTagName("input")[0];
inputFiles.onchange = function(){
    var data = [];      //The results
    var pending = 0;    //How many outstanding operations we have

    //Schedule reading all the files (this finishes before the first onload
    //callback is allowed to be executed)
    Array.prototype.forEach.call(inputFiles.files, function(file, index) {
        //Read this file, remember it in `data` using the same index
        //as the file entry
        var fr = new FileReader();
        fr.onload = function() {
            data[index] = fr.result;
            --pending;
            if (pending == 0) {
                //All requests are complete, you're done
            }
        }
        fr.readAsDataURL(file);
        ++pending;
    });
}

Ou si vous souhaitez pour une raison de lire les fichiers séquentiellement (mais toujours de façon asynchrone), vous pouvez le faire en programmant le prochain appel que lorsque la précédente est terminée:

//Note: This assumes there is at least one file, if that
//assumption isn't valid, you'll need to add an up-front check
var inputFiles = document.getElementsByTagName("input")[0];
inputFiles.onchange = function(){
    var index = 0;

    readNext();

    function readNext() {
        var file = inputFiles.files[index++];
        var fr = new FileReader();
        fr.onload = function() {
            //use fr.result here
            if (index < inputFiles.files.length) {
                //More to do, start loading the next one
                readNext();
            }
        }
        fr.readAsDataURL(file);
    }
}

voici ma réponse. je vous remercie beaucoup.

OriginalL'auteur T.J. Crowder

Voici une autre modification de Jens' réponse (ferroutage hors Mido réponse) afin de vérifier la taille du fichier:

function readFileBase64(file, max_size){
        max_size_bytes = max_size * 1048576;
        return new Promise((resolve, reject) => {
            if (file.size > max_size_bytes) {
                console.log("file is too big at " + (file.size / 1048576) + "MB");
                reject("file exceeds max size of " + max_size + "MB");
            }
            else {
            var fr = new FileReader();  
            fr.onloadend = () => {
                data = fr.result;
                resolve(data)
            };
            fr.readAsDataURL(file);
            }
        });
    }

Pourquoi le downvote?!

OriginalL'auteur JasonZiolo

Vous devez vous connecter pour publier un commentaire.