Question

我有一个php文件，它从多个sql表中选择大量数据。当然，完成整个过程需要很长时间。我想显示一个进度条，它将表示脚本运行的进度。如何显示进度条？下面的脚本显示了php文件的一部分。

<?php

//RIGHT(AdmitCode,1), PartCode, MID(AdmitCode,2,2),  MID(AdmitCode,1,1) DESC, RollCode
$query = "SELECT * FROM students1 ORDER BY PartCode, AdmitCode, yearcode  desc, RollCode";

$result = mysql_query($query);

// start a table tag in the HTML
echo "<table border='1'  align='center' style='border-collapse:collapse'  width='110%'>"; 
echo "<caption>
            <h2>List of candidates for Three year Degree  
                (Honours/General) Programme Examination-".$bx1." (".$bx2.")
            </h2>
    </caption>";

//$row['index'] the index here is a field name
echo "<tr bgcolor=''>
        <th> Sl. No </th>
        <th>ID </th>
        <th> Semester </th>
        <th>    Roll No </th>
        <th> Registration No</th>
        <th> Name </th>
        <th> Honours </th>
        <th>  Elective-1 </th>
        <th> Elective-2 </th>
        <th> Elective-3 </th>
        <th> MIL </th>
        <th>  Foundation </th>
        <th> Soft studies </th>
        <th> Syllabus </th>
    </tr>";

$ty=0;

while($row = mysql_fetch_array($result)){   //Creates a loop to loop through   results
    $ty++;
    if ($ty%2==0)
        echo "<tr bgcolor='pink'>";
    else
        echo "<tr>";
    echo "<td align='center'>$ty</td>
            <td align='center'>" . $row['StudentID']." </td>
            <td align='center'>" . $row['PartCode']."</td>
            <td align='center'>" . $row['AdmitRollNo'] . "</td>
            <td align='center'>" . $row['RegistrationNo']. "</td>
            <td align='left'>" . $row['Name'] . "</td>
            <td align='center'>" . $row['HonoursSubject'] . "</td>
            <td align='center'>". $row['ElectiveSubject1'] . "</td>
            <td align='center'>". $row['ElectiveSubject2'] . "</td>
            <td align='center'>". $row['ElectiveSubject3'] . "</td>
            <td align='center'>". $row['MIL'] . "</td>
            <td align='center'>". $row['Foundation'] . "</td>
            <td align='center'>". $row['SoftStudies'] . "</td>
            <td align='center'>". $row['Syllabus'] . "</td>
        </tr>";  
}

echo "</table>"; //Close the table in HTML

Answer 1

通常，要实现良好的进度条，您需要从执行工作的层（即mysql数据库）中获取进度指示器。我不知道，mysql提供了这样的功能。

因此，您不得不估计操作可能会持续多长时间（即从过去的查询中获取或从查询参数中获取）并且只是实现javascript进度条（JQueryUI提供了一个很好的），这只是基于时间的。

或者，您可以使用微调器指示您不知道此过程实际运行了多长时间。

Answer 2

你可以为表添加div coantainer并有id页面并添加css，这显示加载图像，直到页面满载。

例如

  <div id="page">
    <table>
    </table>
  </div>

css
     <style>
#page {
             display: none;
             }
             #loading {
             display: block;
             position: absolute;
             top: 0;
             left: 0;
             z-index: 100;
             width: 100vw;
             height: 100vh;

            // background-image: url(loading_spinner.gif);
             background-image:url("loading_spinner.gif");
             background-repeat: no-repeat;
             background-position: center;
             }
</style>

<script>
$(window).load(function() {
            $('#page').show();
            $('#loading').hide('slow');

        });

</script>

在您的网页中添加此js代码，这将对您有所帮助。

Answer 3

您可以使用以下简单代码

    <?php
    //header('Content-Type: text/event-stream');
    // recommended to prevent caching of event data.
    header('Cache-Control: no-cache'); 

    //long_process.php
    for($i=1;$i<=3;$i++){
        //do something
        echo '<br>processing...';

        ob_flush();
        flush();
        sleep(1);
    }

    echo 'CLOSE', 'Process complete';
    ?>

或使用如下

的index.php

    <!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8" />
       </head>
       <body>
          <br />
          <input type="button" onClick="startTask()"  value="Start Long Task" />
          <input type="button" onClick="stopTask();"  value="Stop Task" />
          <br />
          <br />
          <p>Results</p>
          <br />
          <div id="results" style="border:1px solid #000; padding:10px; width:300px; height:250px; overflow:auto; background:#eee;"></div>
          <br />
          <progress id='progressor' value="0" max='100' style=""></progress>  
          <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
       </body>
    </html>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    var es; 
    function startTask() {
        es = new EventSource('bar2.php');
        //a message is received
        es.addEventListener('message', function(e) {
            var result = JSON.parse( e.data );
            addLog(result.message);       
            if(e.lastEventId == 'CLOSE') {
                addLog('Received CLOSE closing');
                es.close();
                var pBar = document.getElementById('progressor');
                pBar.value = pBar.max; //max out the progress bar
            }
            else {
                var pBar = document.getElementById('progressor');
                pBar.value = result.progress;
                var perc = document.getElementById('percentage');
                perc.innerHTML   = result.progress  + "%";
                perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
            }
        });
        es.addEventListener('error', function(e) {
            addLog('Error occurred');
            es.close();
        });
    }

    function stopTask() {
        es.close();
        addLog('Interrupted');
    }

    function addLog(message) {
        var r = document.getElementById('results');
        r.innerHTML += message + '<br>';
        r.scrollTop = r.scrollHeight;
    };
    </script>

然后创建以下页面。它调用了index.php

bar.php

    <?php
    header('Content-Type: text/event-stream');
    // recommended to prevent caching of event data.
    header('Cache-Control: no-cache'); 

    function send_message($id, $message, $progress) {
        $d = array('message' => $message , 'progress' => $progress);

        echo "id: $id" . PHP_EOL;
        echo "data: " . json_encode($d) . PHP_EOL;
        echo PHP_EOL;

        ob_flush();
        flush();
    }


    //LONG RUNNING TASK
    for($i = 1; $i <= 10; $i++) {
        send_message($i, 'on iteration ' . $i . ' of 10' , $i*10); 

        sleep(1);
    }

    send_message('CLOSE', 'Process complete');

在php文件中显示进度条

3 个答案:

的index.php

bar.php