如何显示进度状态以及如何检查所有文件是否使用 javascript 上传答案

【问题标题】：How to show the progress status & how to check whether all files are uploaded using javascript如何显示进度状态以及如何检查所有文件是否使用 javascript 上传
【发布时间】：2019-08-30 03:27:07
【问题描述】：

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

如果我删除了多个文件，它已经被一个一个上传了，所以我怎样才能找到所有文件是否都已上传，以便在所有文件上传后，我可以运行另一个函数例如说我有 3 个文件要上传，当我上传 api 调用时，比如 1sfile --> 第二个文件 --> 总上传成功后的第三个文件我想调用一个函数和

在这个过程中我怎样才能显示一个静态的进度，因为它正在一个一个上传进度会出现多次而不是直到总文件完成我想显示进度 以下是我的上传代码::

函数uploadImage(e) {
var upload_count=0,fail_count=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);
    }

}

【问题讨论】：

以下答案不适合您？
你有没有找到我以外的解决方案？

标签： javascript jquery

【解决方案1】：

我将向您展示使用 Jquery 制作上传进度条的著名方法。

$.ajax({
    xhr: function () {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(percentComplete);
                $('.progress').css({
                    width: percentComplete * 100 + '%'
                });
                if (percentComplete === 1) {
                    $('.progress').addClass('hide');
                }
            }
        }, false);

        return xhr;
    },
    type: 'POST',
    url: "you_api_path",
    data: your_data,
    success: function (data) {
     $('#status').html('<b>Uploaded!!!</b>')
    }
});

.progress {
    display: block;
    text-align: center;
    width: 0;
    height: 3px;
    background: red;
    transition: width .3s;
}
.progress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress"></div>
<div id="status"></div>

这是工作小提琴：http://jsfiddle.net/jnzwcgbs/

【讨论】：