Progessbar

Das Hilft mieraber auch nicht weiter wie muss ich dass machen (Das Upload Fiele muss minimum 1MB sein das man die Progressbar sieht :) )
 
Ja, wieSilentWarrior schon bemerkt hat ist das ganze durch XMLHTTPRequest-Verwendung gelöst. Ich hab mir das JavaScript von Rapidshare mal angeschaut und mit einigen Kommentaren versehen zur beispielhaften Ergründung der verwendeten Technologien. Bitte beachtet aber: KEIN COPY'N'PASTE

Code:
var d = 0;
var a = false;

// XML-HTTP-Request-Objekt...
function p(m,f) {
	a = false;
	// Browser-spezifisches Objekt erzeugen
	if(window.XMLHttpRequest) {
		a = new XMLHttpRequest();
		if(a.overrideMimeType) {
			a.overrideMimeType('text/xml');
		}
	} else if(window.ActiveXObject) {
		try {
			a = new ActiveXObject("Msxml2.XMLHTTP");
		} catch(e) {
			try {
				a = new ActiveXObject("Microsoft.XMLHTTP");
			} catch(e) {}
		}
	}
	
	// Wenn Browser kein XMLHTTPRequest unterstützt, dann tu nichts
	if(!a) {
		return false;
	}
	
	// wenn Antwort erhalten, dann führe Funktion "o" aus
	a.onreadystatechange = o;

	// Verbindung aufbauen (Methode, URL, [Asynchron?], [UserName],  [Password])
	a.open('GET',m+f,true);

	// Anfrage senden (NachrichtenInhalt/body)
	a.send(null);
}

// wenn Antwort erhalten baue Progressbar auf...
function o(){
	// nur, wenn Antwort komplett und Server auch sagt, er sei fertig
	if(a.readyState==4) {
		if(a.status==200) {
			// schalte die Progressbar sichtbar
			document.getElementById('progress_block_no').style.visibility="hidden";
			document.getElementById('progress_block').style.visibility="visible";

			// hole Text aus der Antwort vom Server
			var g = a.responseText;

			// wenn mehr als 4 Zeichen
			if(g.length>4) {
				// extrahiere Daten nach vorgegebener Struktur
				var b=g.split("#");
				var i=(b[4].replace(/%/,"")/100*550);

				// Bild in der Progressbar anpassen...
				q(d,i,3800);
				d=i;

				// Daten ins Dokument schreiben...
				document.getElementById('progress_recieved').innerHTML=b[0];
				document.getElementById('progress_total').innerHTML=b[1];
				document.getElementById('progress_percent').innerHTML=b[4];
				document.getElementById('progress_kbpersec').innerHTML=b[2];
				document.getElementById('progress_minutes').innerHTML=b[3];
			} else {
				// wenn weniger als 4 Zeichen -> Antwort ungültig -> Progressbar unsichtbar
				document.getElementById('progress_block_no').style.visibility="visible";
				document.getElementById('progress_block').style.visibility="hidden";
			}
		} else {}
	}
}

// Funktion zum anpassen der Progressbar
function q(j,l,h) {
	var c=15;
	if(h<=c) {
		document.getElementById('progress_img').width=l;
	} else {
		k=l-j;
		move=Math.round(k/h*c);
		if(move<1&&k>0) {
			move==3;
		}
		
		e=j+move;
		document.getElementById('progress_img').width=e;
		setTimeout("q("+e+", "+l+", "+(h-c)+")",c);
	}
}

// Funktion, die alles auslöst und dann alle 5 Sekunden wiederholt...
function r() {
	var n=new Date();
	p('/cgi-bin/uploadjs.cgi','?uploadid=22392886130665167&r='+n.getSeconds());
	setTimeout("r()",5000);
}

// Initialer Aufrufder ganzen Geschichte...
r();

Das ganze ist eigentlich so einfach, wie es aussieht, wenn man sich mit den beteiligten Technologien sowohl client- als auch serverseitig auskennt. Um einen Einstieg in die Arbeit mit dem XMLHTTPRequest Objekt bzw. sogenanntem "AJAX" zu bekommen empfehle ich folgende Seiten:

iX-Artikel: AJAX
Microsofts XML HTTP Objekt (MSDN)
Mozilla XMLHTTPRequest Objekt (XULPlanet)

Ich hoffe, ich konnte ein wenig weiterhelfen...

Gruß, C]-[aoZ
 

Neue Beiträge

Zurück