duanhuan6857 2015-06-29 18:57
浏览 47
已采纳

使用PHP,HTML和Bootstrap加载栏

I have a problem with load bar. I have a file named site.php, load.js and file.php my system read an excel file, and extract the data in a array, I want to display the progress but of the reading row excel file, not of the upload of the excel file.

my site.php

 <!DOCTYPE html>
 <html lang="en">
 <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script type="text/javascript" src="js/jquery.js">
        </script>
    </head>
    <body>
     <div class="progress" style="width:90%; margin:20px auto;">
      <div  id="barra_progreso" class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        <span class="sr-only"></span>
      </div>
    </div>
    </body>
    </html>

load.js

    var datos = new FormData();
    datos.append('excel', file);
    $.ajax({
      url: 'file.php',
      type: 'POST',
      data: datos,
      processData: false,
      contentType: false
    }).done(function(r) {
       $("#msgOK").html(r);
}

file.php

    $cant = $excel->getRow() + 1;
    sleep(1);
    echo "<script type='text/javascript'> 
    $(function() {
var progressbar = $('#barra_progreso'),
    **max = 25**,
    value = 0;
var loading = function() {
    value += 1;
    addValue = progressbar.val(value);
    if (value <= (1 / 3 * max)) {
        progressbar.addClass('progress-bar-danger')
    } else if (value <= (2 / 3 * max)) {
        progressbar.removeClass(' progress-bar-danger ');
        progressbar.addClass('progress-bar-warning')
    } else {
        progressbar.removeClass('progress-bar-warning');
        progressbar.addClass('progress-bar-success')
    }
    var porc = (value / max) * 100;
    var valor = parseFloat(Math.round(porc * 100) / 100).toFixed(2);
    progressbar.css({
        width: porc + '%'
    });
    progressbar.html(valor + '%');
    if (value == max) {
        clearInterval(animate);
        alert('carga completada');
    }
};
var animate = setInterval(function() {
    loading();
}, 1000);

});

</script>";

       flush(); 

        ob_flush();

Every function worked good, but the load bar displayed after the reading of the excel file, I know that behavior is due the ajax.done, I print the max rownum of my excel file and with this value I work in the load bar. Any way for fix this problem ?

  • 写回答

1条回答 默认 最新

  • dpmfur2635 2015-06-29 19:11
    关注

    What you need to do is have two processes run at the same time.

    One that's uploading the file and extracting the data, the other to check what the status of that action is. So you've probably got the first one done.

    To do the second one you will need to record the status of the upload, into the session is probably easiest as long as it won't conflict with anything else. Then with AJAX you set a timer to continuously call a PHP script which gets the status from the session and return it, it should be a very short script.

    Then you use this retrieved data to update your progress bar.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!