ajax多文件上传如何实现有序一个一个的上传并显示进度条？

Question

ajax 上传文件的方法我搞明白了，一下子将多个文件上传到服务器我也搞明白了，现在我期望实现多个文件的时候，一个一个的上传并分别显示进度条，一个上传完了再上传下一个，这个我目前测试了好多便都没法实现，希望有大佬给指点指点，谢谢。

我的主要代码如下：

$(function () {
    var file = [];
    $('#uploadImgBtn').change(function () {
        var _URL = window.URL || window.webkitURL, html = '';
        for (var i = 0; i < this.files.length; i++) {
            file[i] = this.files[i];
        }
        $('#mediaPurviewDiv').html(html);
    });
    $('#saveBtn').click(function () {
        for (var i = 0; i < file.length; i++) {
            var formdata = new FormData();
            formdata.append('file', file[i]);
            $.ajax({
                url: './index.php',
                type: 'post',
                contentType: false,
                processData: false,
                data: formdata,
                //async: false,
                xhr: function () {
                    const xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        xhr.upload.addEventListener('progress', e => {
                            const {loaded, total} = e;

                            var progress = Math.round((loaded * 100) / total);
                            $('#progress').text('第 ' + i + ' 个文件上传进度：' + progress);
                        }, false);
                        return xhr;
                    }
                },
                success: function (data) {
                }
            })
        }
    });
});

目前我的这个代码里面的 for 循环里的 ajax 上传操作总是同时执行的。没有按我期望的一个一个的有序上传。

Answer 1

如果 await 和 promise 难以理解，那么可以看看采用回调递归的方式去操作：

$(function () {
    var file = [];
    $('#uploadImgBtn').change(function () {
        var _URL = window.URL || window.webkitURL, html = '';
        for (var i = 0; i < this.files.length; i++) {
            file[i] = this.files[i];
        }
        $('#mediaPurviewDiv').html(html);
    });
    $('#saveBtn').click(function () {
        doUpload(0);
    });

   function doUpload(i){
       if(i >= file.length){
           return;
       }
       var formdata = new FormData();
           formdata.append('file', file[i]);
       $.ajax({
                url: './index.php',
                type: 'post',
                contentType: false,
                processData: false,
                data: formdata,
                //async: false,
                xhr: function () {
                    const xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        xhr.upload.addEventListener('progress', e => {
                            const {loaded, total} = e;

                            var progress = Math.round((loaded * 100) / total);
                            $('#progress').text('第 ' + i + ' 个文件上传进度：' + progress);
                        }, false);                   
                        return xhr;
                    }
                },
                success: function (data) {
                    doUpload(++i);
                }
            })
   }
});

Answer 2

这个样for循环肯定是不行的, 这样写相当于注册了所有的ajax去执行,类似于:

// 改造使其打印1,2,3,4,5
for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}

需要依次执行使用async/await就行了

Answer 3

首先 异步拼错了,是async不是asycn