Javascript 多文件上传firebase的多个进度条

我正在使用Firebase存储，并试图一次上载多个文件。到目前为止，我所做的是，我得到文件，然后一个接一个地上传到firebase，只有一个进度条显示每个上传文件的进度。我需要的是，当我选择文件时，我想创建与文件数量相等的进度条，它们将开始上传，每个进度条将显示自己的进度

到目前为止，我所做的是：

var up=document.getElementById（“文件上传”），
pr=document.getElementsByClassName（“进度”）[0]；
list=document.getElementsByClassName（“list”）[0]；
//侦听文件选择
up.addEventListener（'change'，函数（e）{
//获取文件
for（var i=0；i}

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

var up=document.getElementById（“文件上传”），
pr=document.getElementsByClassName（“进度”）；
list=document.getElementsByClassName（“list”）[0]；
//侦听文件选择
up.addEventListener（'change'，函数（e）{
//获取文件
for（var i=0；i'+
''+imageFile.name+''+
''+imageFile.size+''+
''+
“”）；
上传ImageAsPromise（imageFile，i）；
}
});
//使用promise处理等待上载每个文件
函数uploadImageAsPromise（imageFile，i）{
返回新承诺（功能（解决、拒绝）{
var storageRef=firebase.storage（）；
//上传文件
var task=storageRef.put（imageFile）；
//更新进度条
task.on（'state_changed'，
功能进度（快照）{
var百分比=snapshot.bytesttransfered/snapshot.totalBytes*100；
pr[i].值=百分比；
},
函数错误（err）{
},
函数完成（）{
var downloadURL=task.snapshot.downloadURL；
log（“文件”+（i+1）+“上传”）；
log（下载URL）；
}
);
});
}

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

var up=document.getElementById（“文件上传”），
pr=document.getElementsByClassName（“进度”）；
list=document.getElementsByClassName（“list”）[0]；
//侦听文件选择
up.addEventListener（'change'，函数（e）{
//获取文件
for（var i=0；i'+
''+imageFile.name+''+
''+imageFile.size+''+
''+
“”）；
上传ImageAsPromise（imageFile，i）；
}
});
//使用promise处理等待上载每个文件
函数uploadImageAsPromise（imageFile，i）{
返回新承诺（功能（解决、拒绝）{
var storageRef=firebase.storage（）；
//上传文件
var task=storageRef.put（imageFile）；
//更新进度条
task.on（'state_changed'，
功能进度（快照）{
var百分比=snapshot.bytesttransfered/snapshot.totalBytes*100；
pr[i].值=百分比；
},
函数错误（err）{
},
函数完成（）{
var downloadURL=task.snapshot.downloadURL；
log（“文件”+（i+1）+“上传”）；
log（下载URL）；
}
);
});
}