我已经知道如何使用以下设置来完成上传单个文件的简单 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秒钟左右,这就是为什么我想要对响应进行进度条的原因。
$.get('step1.php', function(data){$('#prog').css({width:data + '%'}); $.get('step2.php', function(data){$('#prog').css({width:data + '%'})}); });
然后在step1.php中完成工作,然后echo "20";
...编辑:抱歉这不太易读,我会发布一个答案。 - Mikk3lRo