Die Grundlagen dazu finden sich in dem Post davor, wo der Super-Simpel-Fileupload mit PHP erklärt worden ist. Das ist die Erweiterung des Beispiels, um den Fileupload auch ohne Reload üebrwachen zu können. Wie gesagt, die Beispiele, die ich gefunden habe, sind eigentlich ganz nett, aber haben meistens zu viel Code oder brauchen bestehende AJAX-Klassen, ich wollte ein Beispiel, das ohne weitere Dateien funktioniert. Ich habe es übrigends auch in eine Typo3-Extension gegossen.
Die Dateien im Beispiel davor habe ich alle mit dem Suffix _ajax versehen und bearbeitet. Das Formular bliebt, wie es ist, es kommt nur der Event-Handler onSubmit dazu, der nach dem Beginn des Uploads den Status abfragt. Das zweite iFrame, das sich ständig neugeladen hat, kommt auch raus, stattdessen werden hinter das Formular zwei divs gesetzt: response und response_counter. Im ersten wird der Ladebalken angezeigt und im zweiten will ich die Request zählen (einfach so), kann man nachher ausblenden. Das ist der Teil zwischen body-Start und -Ende.

Dann braucht man noch einen AjaxRequest, den hab ich mir hier abgeschaut: http://www.w3schools.com/AJAX/ajax_server.asp. Beim Absenden des Formulars wird die Funktion upm_start mit er generierten Id aufgerufen (upm = upload progress manager), da werden alle Werte gespeichert und die Update-Funktion aufgerufen. Innerhalb der Update-Funktion wird progress_ajax mit der Upload-Id und einem zufälligen Wert aufgerufen (damit das Caching umgangen wird). Wenn die Antwort von progress_ajax in XML-Form zurückkommt, wird diese verarbeitet und es wird ein Ladebalken generiert. Danach wird mit einem Timeout die Funktion zur Fortschrittsabfrage erneut aufgerufen. Wenn der Upload fertig ist, wird aus dem iFrame heraus die Funktion upm_end aufgerufen, die die Request stoppt.
Zu beachten sind folgende Sachen:
Der IE mag es nicht, wenn man einen Request ein weiteres Mal verwendet, damit es keine Probleme gibt, muss die Callback-Funktion erneut bei onReadyStateChange hinzugefügt werden und zwar nach der Open-Anweisung.
Dann habe ich eine zusätzliche Abfrage eingebaut, um eventuelle Endlos-Schleifen zu vermeiden, es wird bei jedem leeren Request ein Zähler gesetzt und wenn dieser 100 erreicht, wird die Schleife gestoppt.
Wichtig bei der Rückgabe (progress_ajax.php) ist, dass man den Content-Type auf xml setzt, ansonsten steht die Eigenschaft responseXML nach der Rückgabe nicht zur Verfügung.
Man könnte auch setInterval verwendet, das hat aber den Nachteil, das die Requests gesendet werden unabhängig davon, ob der letzte zurückgekommen ist. Und so könnten mehrere Requests parallel unterwegs sein, was den Server auf Dauer und bei mehreren Benutzern verlangsamt.

function initAjax() {
if(window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject(„Msxml2.XMLHTTP“);
} catch(e) {
try {
xmlHttp = new ActiveXObject(„Microsoft.XMLHTTP“);
} catch(e) {
return false;
}
}
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function upm_start(upload_id) {
upm_counter = 0;
upm_upload_id = upload_id;
upm_started = 1;
total_negative = 0;
document.getElementById(„response“).innerHTML = „“;
document.getElementById(„response_counter“).innerHTML = „“;
upm_update();
}
function upm_update() {
upm_counter++;
if(upm_started == 1 && total_negative < 100) { document.getElementById("xajax_response_counter").innerHTML+= upm_counter; var randNum = Math.ceil(Math.random()*1000); xmlHttp.open("GET","progress_ajax.php?uid="+upm_upload_id+"&r="+randNum,false); // set the readystatechange again for IE to reuse the object xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4 && xmlHttp.status == 200) { displayProgress(); } } xmlHttp.send(null); } } function displayProgress() { document.getElementById("response_counter").innerHTML+= "| "; response = xmlHttp.responseXML.documentElement; var loaded = 0; var total = -1; var time = 0; var speed = 0; var est_sec = 0; // Bytes loaded try { loaded = response.getElementsByTagName("loaded")[0].firstChild.data; } catch(e) {} // Bytes total try { total = response.getElementsByTagName("total")[0].firstChild.data; } catch(e) {} // PHP time() function value -> to check how often the request are send
try {
time = response.getElementsByTagName(„time“)[0].firstChild.data;
} catch(e) {}
// speed
try {
speed = response.getElementsByTagName(„speed“)[0].firstChild.data;
} catch(e) {}
// est_sec
try {
est_sec = response.getElementsByTagName(„est_sec“)[0].firstChild.data;
} catch(e) {}
//
if(total == -1) total_negative++;
var percent = Number(loaded/total*100).toFixed(2);
var width = Math.round(percent * 2.5);
var progress = „

„;
document.getElementById(„xajax_response“).innerHTML = progress;
window.setTimeout(„upm_update()“,500);
}

function upm_end() {
document.getElementById(„response“).innerHTML = „“;
upm_started = 0;
}

function formatSeconds(sec) {
var min = Math.floor(sec/60);
var hour = Math.floor(min/60);
if(hour > 1) {
return hour+“ h „+min+“ m“;
} else if(min > 1) {
return min+“ m „+sec+“ s“;
} else {
return sec+“ s“;
}
}

function formatBytes(b) {
var kb = Number(b / 1024);
var mb = Number(kb / 1024);
var gb = Number(mb / 1024);
if(gb > 1) {
return gb.toFixed(2)+“ GB“;
} else if(mb > 1) {
return mb.toFixed(2)+“ MB“;
} else if(kb > 1) {
return kb.toFixed(2)+“ KB“;
} else {
return b.toFixed(2)+“ B“;
}
}
initAjax();

Das in den Header der result_ajax.php

window.parent.upm_end();


‚;
$upload_id = $_GET[‚uid‘];

$xml = ‚‚;
if(function_exists(‚uploadprogress_get_info‘)) {
$progress = uploadprogress_get_info($upload_id);
$xml.= ‚‚.$upload_id.‘‚;
$xml.= ‚‚.time().‘‚;
//$xml.= ‚‚.var_export($progress,true).‘‚;
$xml.= ‚‚.$progress[‚bytes_uploaded‘].‘‚;
$xml.= ‚‚.$progress[‚bytes_total‘].‘‚;
$xml.= ‚‚.$progress[’speed_average‘].‘‚;
$xml.= ‚‚.$progress[‚est_sec‘].‘‚;
} else {
$xml.= ‚‚.$upload_id.‘‚;
$xml.= ‚0‚;
$xml.= ‚0‚;
$xml.= ‚0‚;
$xml.= ‚0‚;
}
$xml.= ‚‚;
echo $xml;
?>

UPDATE 26.August 2008: Hatte mit diesem Stückchen Code in den letzen Tagen tierische Probleme in den letzen Monaten. Zunächst mal funktionierte es nicht auf dem Mac – weder unter Firefox, noch unter Safari, nix. Hat mich wahnsinnig gemacht. Die Lösung war sehr dirty und nicht quick – ich musste den kompletten Upload Bar (in HTML) generieren und zurückgeben lassen, weil das Auswerten des XML-Objektes irgendwie nicht wollte. Soll auch ein bekanntes Problem sein, hab ich gehört.
Nun die nächste Problem: Unter Firefox 3 tats nicht. Also recherchiert – Firebug Bugs, Caching Probleme etc. Zum Glück gabs diesmal eine schöne Lösung, anstatt GET einfach POST zu verwenden:

xmlHttp.open(„POST“,“progress_ajax.php?uid=“+upm_upload_id+“&r=“+randNum,true);