Ich habe den folgenden HTML-Code:

<input type='file' multiple>

nd hier ist mein JS-Cod

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]);
}

Also meine Frage ist,wie kann ich diese Schleife synchronisieren? Warten Sie zunächst, bis die Datei vollständig geladen ist, und fahren Sie dann mit der nächsten Datei fort. Jemand sagte mir, ich solle @ benutzJS Promises. Aber ich kann es nicht schaffen zu arbeiten. Folgendes versuche ich:

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
            }
        });
    };
}

Danke im Voraus..