javascript - firebase 多个文件上传的多个进度条

Question

我正在使用 Firebase Storage 并尝试一次上传多个文件。到目前为止我所做的是，我获取文件，然后将其一一上传到 firebase，只有一个进度条显示每个上传文件的进度。我需要的是，当我选择文件时，我想创建等于文件数量的进度条，它们将开始上传，每个进度条将显示自己的进度。

到目前为止我所做的是:

var up = document.getElementById("fileUpload"),
    pr = document.getElementsByClassName("progress")[0];
    list = document.getElementsByClassName("list")[0];


//Listen for file selection
up.addEventListener('change', function(e){ 
    //Get files
    for (var i = 0; i < e.target.files.length; i++) {
        var imageFile = e.target.files[i];

        uploadImageAsPromise(imageFile,i);
    }
});

//Handle waiting to upload each file using promise
function uploadImageAsPromise (imageFile,i) {
    return new Promise(function (resolve, reject) {
        var storageRef = firebase.storage().ref($.cookie("_lo")+"/"+imageFile.name);

        //Upload file
        var task = storageRef.put(imageFile);

        //Update progress bar
        task.on('state_changed',
            function progress(snapshot){
                var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
                pr.value = percentage;
            },
            function error(err){

            },
            function complete(){
                var downloadURL = task.snapshot.downloadURL;
                console.log("file " + (i+1) + " Uplaoded");
                console.log(downloadURL);
            }
        );
    });
}

Answer 1

这是我提供的最快的解决方案:

var up = document.getElementById("fileUpload"),
    pr = document.getElementsByClassName("progress");
    list = document.getElementsByClassName("list")[0];


//Listen for file selection
up.addEventListener('change', function(e){ 
    //Get files
    for (var i = 0; i < e.target.files.length; i++) {
        var imageFile = e.target.files[i];
        list.insertAdjacentHTML('afterbegin','<li class="row">'+
									          	'<div class="col-4">'+imageFile.name+'</div>'+
									          	'<div class="col-4">'+imageFile.size+'</div>'+
									          	'<progress value="0" max="100" class="progress"></progress>'+
									          '</li>');
        uploadImageAsPromise(imageFile,i);
    }
});

//Handle waiting to upload each file using promise
function uploadImageAsPromise (imageFile,i) {
    return new Promise(function (resolve, reject) {
        var storageRef = firebase.storage().ref($.cookie("_lo")+"/"+imageFile.name);

        //Upload file
        var task = storageRef.put(imageFile);

        //Update progress bar
        task.on('state_changed',
            function progress(snapshot){
                var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
                pr[i].value = percentage;
            },
            function error(err){

            },
            function complete(){
                var downloadURL = task.snapshot.downloadURL;
                console.log("file " + (i+1) + " Uplaoded");
                console.log(downloadURL);
            }
        );
    });
}