Php 具有多个Ajax调用的进度条

简言之，我有一个javascript数组，其中包含一些csv文件以加载到mysql数据库中，并创建了一个脚本，用于对处理将文件上载到数据库的php页面进行ajax（）调用。在客户端有一个progressbar，它随加载到数据库中的每个文件一起移动。如果我使用'async:false'，一切正常，但浏览器被阻止，我不想这样做，但如果我使用'async:true'，一切发生得非常快，progressbar无法跟上同步加载的每个文件的速度。有人能组织代码，使ptogressbar和上传的每个文件保持同步吗

    <button  id="loadfiles"class="btn"><span>Start Loading</span><span style="display: none">Stop Loading</span></button>

<script>

$(document).ready(function(){

var strFiles = 'SC2RFFBCRMEPOSAPP20131022.csv|SC2RFFBDEALERSORO20131022.csv|SC2ROFUOR00_ESHOP20131026.csv|SC2ROFUOR00_ESHOP20131027.csv|SC2ROFUOR00_ESHOP20131028.csv|SC2RFSFCRMEPOSAPP20131022.csv|SC2RFSFDEALERSORO20131022.csv|SC2ROSFWEBSHOPAPP20131022.csv|SC2RFRPCRMEPOSAPP20131022.csv|SC2RFRPDEALERSORO20131022.csv|SC2RORPOR00_ESHOP20131022.csv|SC2RORPWEBSHOPAPP20131022.csv|Active_range_20131022.csv|Active_range_20131023.csv|Active_range_20131024.csv|SC2ROZBOR00_SLRM_20131019(1).csv|SC2ROZBOR00_SLRM_20131019.csv' ;
var arrFiles = strFiles.split('|');
var strFileType = {Full:5,Scope:3,Proposal:4,ActiveRange:3,ForceValue:2} ;
var pragcycle = 0;
var step = 0 ;
var increment = 0;
var i=0


  $("#loadfiles").click(function(){

 for (key in strFileType)
  {  

    step = 100 / strFileType[key];
    pragcycle = pragcycle + strFileType[key];
    increment = 0;

  for (i;i<pragcycle;i++)
        {   

    var request =    $.ajax({
             url:'/quickadmin/php/admin/pages/AppLoadCSV.php',
             async: false,
             data: "basename=" + arrFiles[i] ,
             success:function() {

                    increment = increment + step;
                    $("." + key).attr("style","width: " + increment + "%");

                                }
                            })

        }


    }


  });


});




</script>

开始加载停止加载
$（文档）.ready（函数（）{
研究人员档案档案档案风险风险向量=‘SC2RfRF档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案档案文件=‘SC2Rf协协协协协20131022.csv | SC2RfRf档案档案档案2010 2010年10 10 10 10 22.22.csv | SC2Rf二致2010 2010 2010年10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 22.22.csv.csv \124; csv 124; SC2RoRoRoRoRoRoRoRo或者或者或者10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 SC2RORPWEBSHOPAPP20131022.csv |活动范围20131022.csv |活动范围20131023.csv |活动范围20131024.csv | SC2ROZBOR00 SLRM 20131019（1.csv | SC2ROZBOR00 20131019.csv |；
var arrFiles=strFiles.split（“|”）；
var strFileType={Full:5，Scope:3，Proposal:4，ActiveRange:3，ForceValue:2}；
var-pragcycle=0；
var阶跃=0；
var增量=0；
变量i=0
$（“#加载文件”）。单击（函数（）{
用于（输入strFileType）
{  
step=100/标准文件类型[键]；
pragcycle=pragcycle+strFileType[key]；
增量=0；
对于（i；这是一个糟糕透顶的设计。你上传的每一条记录都会有一个http请求。5000条记录，5000个http请求，5000次网络故障丢失记录的机会。这是对带宽和处理时间的巨大浪费。你最好使用普通的文件上传，上面有一个普通的上传进度表。然后处理i在服务器上批量下载该文件。嗨，Marc！http请求适用于每个文件，并且不会超过30个文件