PHP AJAX进度条更新包含多个步骤


PHP AJAX progress bar update with multiple steps

我已经知道如何使用以下设置创建一个简单的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"步。这意味着当我在第1步时,进度条当然会显示完成了20%,第2步显示完成了40%等等

我该怎么做这样的事情呢?非常感谢您的帮助。

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

正如Benten所说,我可能会把它分为5个不同的页面,但这似乎会比解决这个问题引起更多的问题,因为很多数据必须传递到每个新页面,而不是只使用一个页面。例如第一步,我必须把数据转换成不同的东西。第二步,我必须对数据进行查找。第三步,我必须把查找数据时找到的所有数据都整理好,然后把信息插入数据库。这些步骤通常每个步骤需要5-10秒左右,这就是为什么我想在回答栏中前进。

你能把你的步骤分成5个单独的请求吗?或者,每次在php代码中完成一步,都可能在数据库中创建一行或类似的行。然后,一个单独的ajax请求可以检查或等待此行的添加,并向用户报告进度。

要进行单独的请求,您可以编写这样的内容(假设您已将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]
        });
    });
}