PHP AJAX多步骤进度条更新

Question

我已经知道如何使用以下设置来完成上传单个文件的简单 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页面上完成的步骤来显示进度条。

例如...

假设我有以下代码结构...

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

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

   etc...

我已经知道最大步数为“5”。我希望在每个步骤达到最大的“5”步之前，能够每报告一次步骤就让进度条上升。这意味着当我在第一步时，进度条将显示已完成20%，第二步为40%等等。

我该如何做才能实现这样的效果？非常感谢您的帮助。

编辑 - 对正在进行的工作进行更详细的说明：

正如Benten所说，我可以将其分成5个不同的页面，但这似乎会引起比解决此问题更多的问题，因为需要将许多数据传递到每个新页面，而不是只使用1个页面。例如，第一步，我必须将数据转换为不同的形式。第二步，我必须查找数据。第三步，我必须将查找数据时找到的所有数据组织起来并将信息插入到数据库中。等等...这些步骤通常需要每个步骤5-10秒钟左右，这就是为什么我想要对响应进行进度条的原因。

- eqiz

---

我认为@Benton并没有建议你将用户端的流程分成5个步骤（当你说5个不同的页面时，这就是我的理解）-只是让你将实际工作分成5个单独的ajax请求（在每个请求之后，你可以增加进度条）...如果这不是一个选项，你可能需要考虑更复杂的解决方案。 - Mikk3lRo

你对浏览器支持有什么要求？ - Mikk3lRo

当然，浏览器支持需要它能够在所有浏览器上运行，至少IE9及以上版本。我该如何使用5个不同的ajax请求来完成它？这是让我感到困惑的部分。这可能是一种可能性，但不幸的是我无法在脑海中想象出来。 - eqiz

如果你能想象在5个不同的页面中完成它，那么在5个不同的ajax请求中完成它将完全相同 - 只是这些“页面”不会显示给用户，而是返回到更新进度条的javascript函数... 你知道如何制作一个ajax请求吧？如果使用jQuery，可以像这样：$.get('step1.php', function(data){$('#prog').css({width:data + '%'}); $.get('step2.php', function(data){$('#prog').css({width:data + '%'})}); }); 然后在step1.php中完成工作，然后 echo "20"; ...编辑：抱歉这不太易读，我会发布一个答案。 - Mikk3lRo

Answer 1

你能否将步骤分成5个独立的请求？或者，每次在你的PHP代码中完成一个步骤时，可以在数据库中创建一行或类似的东西。然后，单独的ajax请求可以检查或等待这个行添加并向用户报告进度。

- Benten

Answer 2

为了分别处理请求，您可以编写如下代码（假设您已经将jQuery加载到$中）：

$.get('step1.php', function(data){
    $('#prog').css({width:data + '%'});
    $.get('step2.php', function(data){
        $('#prog').css({width:data + '%'});
        //[...and so on]
    });
});

然后在 step1.php 到 step5.php 中：

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

//Return the progress
echo "20";

为了让您更好地理解，以下例子假设$=jQuery：

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]
        });
    });
}

- Mikk3lRo