猿问

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

为了实现一个点击按钮实现多文件上传并且为每个文件单独生成进度条
upload
点击事件
$('#button').on('click',function(){
$("#file").trigger("click");//触发input点击事件
$('#file').on('change',function(){//监听input改变
varlength=$('#file')[0].files.length;//获取选择文件的数量
for(varindex=0;indexvarfile=document.getElementById('file').files[index];//根据循环变量来动态选择用户多选的文件
varname=file.name;//文件名
varsize=file.size;//文件大小
varformData=newFormData();
/*
动态生成一个表格行,有一个是显示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);
varloaded=e.loaded;//已上传
console.log(loaded);
vartotal=e.total;//总大小
console.log(total);
varpercent=Math.floor(100*loaded/total);//进度
console.log(percent);
console.log(index);
//根据上面动态生成的进度条id和进度数据修改样式达到显示进度作用
setProgress('upload_'+index,percent);
});
returnmyXhr;
}
},
自己搜了下,for循环并不会等ajax执行完在执行下一个循环,只要请求发送了,for循环就继续执行,并且for循环速度比ajax快,所以
setProgress('upload_'+index,percent);
中获取的index循环变量总是获取的是最后一个,导致进度条显示不正确。
有什么办法能解决吗?具体就是想让每个ajax都获取到的是不同的id值
亦或者有什么其他的办法能上传多个文件的同时给每个文件都单独显示进度条呢
求老哥们支点招
Cats萌萌
浏览 677回答 2
2回答

慕沐林林

ajax部分封装成一个函数functionfileUpload(i){//…………}for循环内调用这个函数for(varindex=0;index
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答