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

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

upload

点击事件

$('#button').on('click',function () {

$("#file").trigger("click"); //触发input点击事件

$('#file').on('change',function () { //监听input改变

var length = $('#file')[0].files.length; //获取选择文件的数量

for(var index=0 ;index

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值

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

求老哥们支点招