我已经知道如何使用以下设置创建一个简单的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]
});
});
}