为了实现一个点击按钮实现多文件上传并且为每个文件单独生成进度条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值亦或者有什么其他的办法能上传多个文件的同时给每个文件都单独显示进度条呢求老哥们支点招
慕沐林林
相关分类