使用多个步骤更新PHP进度条
使用多个步骤更新PHP进度条
提问于 2015-07-06 12:24:06
我已经知道如何做一个简单的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“步骤。这意味着当我在第一步，当然进度条将显示20%完成，步骤2在40%，等等。
我该怎么做这样的事？帮助是非常感谢的。
编辑-关于正在做什么的更详细的信息。
正如Benten所说的，我可能会将其划分为5个不同的页面，但这似乎会导致比解决这个问题更多的问题，因为大量数据将不得不传递到每个新页面，而不仅仅是使用1页。例如..。第一步，我必须把数据转换成不同的东西。第二步，我必须对数据进行查找。第三步，我必须将我在查找数据时发现的所有数据，然后组织起来，并将信息插入到数据库中。等等。这些步骤通常每个5到10秒左右，这就是为什么我想要取得进展，以阻止响应。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-06 18:50:43
要执行单独的请求，您可以编写类似的内容(假设您已将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]
});
});
}Stack Overflow用户
发布于 2015-07-06 14:09:57
你能把你的步骤分成五个单独的请求吗？或者，您在php代码中完成的每一个步骤都可以在数据库中创建一行或其他类似的内容。然后，单独的ajax请求可以检查或等待此行的添加，并向用户报告进度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31245766
复制相关文章
相似问题
腾讯云开发者
