如何显示进度状态&；如何使用javascript检查是否上载了所有文件

我正在创建多个文件上传，在这里我上传文件到远程api，直到现在它工作正常，这里是我的问题

如果我删除多个文件，它会一个接一个地上传，那么如何查找是否所有文件都已上传，以便在上传完所有文件后，我可以运行另一个函数，例如，我有3个文件要上传，当我上传api调用时，如总上传完成后的1文件-->第2文件-->第3文件成功我想调用一个函数

在此过程中，我如何显示静态进度，因为它正在一个接一个地上传进度，而在总文件完成之前，我要显示进度 以下是我的上传代码：

函数上传图像（e） {
var上传计数=0，失败计数=0

for(let i=0;i<e.files.length;i++){
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    let images = e.files[i];
    formData.set('file',images);

    xhr.onreadystatechange = state => { 


        if(xhr.status==201){
            upload_count++;
            if(upload_count==e.files.length){
             console.log("completed all")

            }
        }
        else if(xhr.status==400){
            fail_count++;

            if(fail_count==e.files.length){

            }
        }
        console.log("i="+i)
        console.log("lenght=="+e.files.length)


    } 
    xhr.open("POST", '<some api>');  
    xhr.send(formData);
    }

for（设i=0；i{
如果（xhr.status==201）{
上传_count++；
如果（上传计数==e.files.length）{
console.log（“全部完成”）
}
}
否则如果（xhr.status==400）{
失败计数++；
if（fail_count==e.files.length）{
}
}
console.log（“i=“+i”）
log（“lenght==”+e.files.length）
} 
xhr.open（“POST”和“”）；
xhr.send（formData）；
}

}

---

我将向您展示使用Jquery制作上传进度条的众所周知的方法

$.ajax({
xhr：函数（）{
var xhr=new XMLHttpRequest（）；
xhr.upload.addEventListener（“进度”，函数（evt）{
if（evt.长度可计算）{
var percentComplete=evt.loaded/evt.total；
控制台日志（完成百分比）；
$（'.progress'）.css({
宽度：完成百分比*100+'%
});
如果（完成百分比===1）{
$（'.progress'）.addClass（'hide'）；
}
}
}，假）；
返回xhr；
},
键入：“POST”，
url:“你的api路径”，
数据：您的_数据，
成功：功能（数据）{
$（'#status'）.html（'上传！！！'））
}
})；

。进度{
显示：块；
文本对齐：居中；
宽度：0；
高度：3倍；
背景：红色；
过渡：宽度3s；
}
.进步，隐藏{
不透明度：0；
过渡：不透明度1.3s；
}

下面的答案不适合您？您是否找到了其他解决方案？