通过多个步骤更新PHP AJAX进度条

我已经知道如何使用下面的设置实现一个简单的AJAX进度条类型的系统来上传单个文件

function pushData() {
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "dosomething.php");

ajax.send(formdata);
}

function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
}

function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

但是，我希望能够根据发送回处理程序的dosomething.php bage上正在执行的步骤来创建进度条

例如

假设我有以下代码结构

   //report back doing step1
   //do step 1....

   //report back doing step2
   //do step 2....

   etc...

我已经知道我的最大步数为“5”。我希望能够做到这一点，使进度条上升后，报告了每一步最多“5”个步骤。这意味着当我在第1步时，进度条将显示20%完成，第2步显示40%完成，等等

我该怎么做这样的事情呢？非常感谢你的帮助

编辑-有关正在执行的操作的更多详细信息

---

正如Benten所说，我可能会将其分为5个不同的页面，但这似乎比解决这一个问题会引起更多的问题，因为大量数据将必须传递到每个新页面，而不是仅使用1个页面。例如第一步，我必须把数据转换成不同的东西。第二步，我必须查找数据。第三步，我必须获取查找数据时发现的所有数据，然后对其进行组织并将信息插入数据库。等这些步骤通常每一步大约需要5-10秒，这就是为什么我想对响应进行进度栏处理。

您能将步骤分为5个单独的请求吗？

---

或者，每次您在php代码中完成一个步骤时，都可以在数据库或类似的东西中创建一行。然后，一个单独的ajax请求可以检查或等待该行的添加，并向用户报告进度。

要执行单独的请求，您可以编写如下内容（假设您已将

jQuery

加载到

$

）：

然后在

step1.php

[…]

step5.php

：

<?php
//Do some really heavy lifting:
sleep(5);

//Return the progress
echo "20";

---

我不认为@Benton建议您在用户端将流程分为5个步骤（这是我在您说5个不同页面时所理解的）-只是将实际工作分为5个单独的ajax请求（在每个请求之后，您可以增加进度条）。。。如果这不是一个选项，您可能正在寻找更复杂的解决方案。您对浏览器支持有什么要求？当然，浏览器支持需要它在所有浏览器上工作，至少IE9及以上。我将如何在5个不同的ajax请求中执行它？这就是让我困惑的部分。这可能是可能的，但不幸的是，我并没有在脑海中看到它。如果你可以想象在5个不同的页面中完成它，那么在5个不同的ajax请求中完成它将是完全相同的-除了那些“页面”没有显示给用户，而是返回到更新进度表的javascript函数。。。您知道如何发出一个ajax请求，对吗？如果使用jQuery类似于

$.get（'step1.php'，function（data）{$（'prog'）.css（{width:data+'%}）；$.get（'step2.php'，function（data）{$（'prog'）.css（{width:data+'%}）；}）echo“20”…编辑：很抱歉，这不是很可读，我将发布一个答案。
<?php
//Do some really heavy lifting:
sleep(5);

//Return the progress
echo "20";

function completeHandler(event){
    //Upload completed
    _("status").innerHTML = 'File upload completed - doing step 1';
    _("progressBar").value = 0;
    $.get('step1.php', function(data){
        _("status").innerHTML = 'Step 1 completed - doing step 2';
        _("progressBar").value = data;
        $.get('step1.php', function(data){
            _("status").innerHTML = 'Step 2 completed - doing step 3';
            _("progressBar").value = data;
            //[...and so on]
        });
    });
}