Question

简而言之，我有一个带有一些csv文件的javascript数组要加载到mysql数据库中，并创建了一个脚本，使得ajax（）调用一个处理将文件上传到数据库的php页面。在客户端，有一个进度条随着每个文件加载到数据库中而移动。如果我使用'async：false'，一切顺利，但浏览器被阻止，我不想要这个，但如果我使用'async：true'，一切都很快发生，进度条跟不上同步加载的每个文件。任何人都可以构造代码，以便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>

具有多个Ajax调用的进度条

0 个答案: