Question

我已经知道如何使用以下设置来上传单个文件的简单AJAX Progress Bar类型的系统......

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页。例如..步骤1，我必须将数据转换为不同的东西。第2步，我必须对数据进行查找。第3步，我必须获取查找数据时找到的所有数据，然后组织它并将信息插入数据库。等等......这些步骤通常需要大约5到10秒，这就是为什么我想要进行反应。

Answer 1

您可以将步骤拆分为5个单独的请求吗？或许，每一天你在PHP代码中完成一步都可以在数据库中创建一行或类似的东西。然后，单独的ajax请求可以检查或等待此行添加，并将进度报告给用户。

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

PHP AJAX进度条更新有多个步骤

2 个答案: