php+jquery for循环发送ajax请求监听文件上传进度不正确

Question

为了实现一个点击按钮实现多文件上传并且为每个文件单独生成进度条

<form id="form" method="post">
    <input type="file" class="btn btn-primary" name="file" id="file" multiple>
</form>
<button id="button">upload</button>

点击事件

$('#button').on('click',function () {
            $("#file").trigger("click");    //触发input点击事件
            $('#file').on('change',function () {    //监听input改变
                var length = $('#file')[0].files.length;    //获取选择文件的数量
                for(var index=0 ;index<length;index++){    //循环发送ajax
                    var file = document.getElementById('file').files[index];    //根据循环变量来动态选择用户多选的文件
                    var name = file.name;    //文件名
                    var size = file.size;    //文件大小
                    var formData = new FormData();
                    /*
                        动态生成一个表格行，有一个是显示bootstrap的进度条
                    */
                    
                    formData.append('file',file);    //发送的数据
                    $.ajax({
                        type: 'post',
                        url: "{:url('index/home/uploader')}",
                        data: formData,
                        cache: false,
                        processData: false,
                        contentType: false,
                        xhr: function () {  //获取上传进度
                            myXhr = $.ajaxSettings.xhr();
                            if (myXhr.upload) {
                                myXhr.upload.addEventListener('progress', function (e) {
                                    console.log(e);
                                    var loaded = e.loaded;//已上传
                                    console.log(loaded);
                                    var total = e.total;//总大小
                                    console.log(total);
                                    var percent = Math.floor(100 * loaded / total);//进度
                                    console.log(percent);
                                    console.log(index);
                                    //根据上面动态生成的进度条id 和 进度数据 修改样式达到显示进度作用
                                    setProgress('upload_'+index,percent);
                                });
                                return myXhr;
                            }
                        },

自己搜了下，for循环并不会等ajax执行完在执行下一个循环，只要请求发送了，for循环就继续执行，并且for循环速度比ajax快，所以

setProgress('upload_'+index,percent);

中获取的index循环变量总是获取的是最后一个，导致进度条显示不正确。

有什么办法能解决吗？
具体就是想让每个ajax都获取到的是不同的id值

亦或者有什么其他的办法能上传多个文件的同时给每个文件都单独显示进度条呢

求老哥们支点招

Answer 1

ajax部分封装成一个函数

function fileUpload(i){
    //…………
}

for循环内调用这个函数

for(var index=0 ;index<length;index++){
    //…………
    fileUpload(index);
}

Answer 2

将$.ajax的async参数设置为false。让其变成同步请求就可以

http://www.w3school.com.cn/jq...

补充了下楼主的留言，我用版本是jq3.4,而且我试了下1.4以上都是可以

  for(var index=0 ;index<10;index++){
            $.ajax({
                type: 'get',
                url: "http://sdk.me/ttt?d="+index,
                cache: false,
                processData: false,
                async:false,
                contentType: false,
                success:function(result){
                    console.log(result.data.data)
                }
            })
        };

Answer 3

用Huploadify这个试试，我就用的这个，还挺好用的
直达链接看一下：https://blog.csdn.net/eagle_8...