JavaScript Progressbar erstellen und aktualisieren, aber wie?

Sithys · 28. August 2014

Moin zusammen,
habe ein Upload Script welches einwandfrei funktioniert und ein Video an meinen Server übermittelt. Nun möchte ich gerne, dass dem User eine Statusbar angezeigt wird, während der Upload stattfindet.

Um überhaupt mal einen Wert der % herauszubekommen nutze ich derzeit ein Script aus dem Internet ->

Code:

ft.onprogress = function(progressEvent) {
				if (progressEvent.lengthComputable) {
			var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
		statusDom.innerHTML = perc + "% loaded...";
				console.log(perc);
				} else {
						if(statusDom.innerHTML == "") {
						statusDom.innerHTML = "Loading";
				} else {
						statusDom.innerHTML += ".";
				}
			}
		};

Das funktioniert auch soweit so gut, die Prozentzahl rattert unter dem Video hoch und irgendwann ists dann fertig.

Wie aber bekomme ich die Werte in eine progressbar die sich dann füllt?
Habe von JavaScript leider nicht sonderlich viel Ahnung :-/

Troublegum · 28. August 2014

Du brauchst in deinem HTML Code erstmal eine Progressbar. Wenn du mit CSS fit bist, kannst du dir eine basteln. siehe z.B.
http://css-tricks.com/css3-progress-bars/
Ansonsten gibt es ja Bootstrap, da sind schon so einige Elemente dabei, wie z.B. auch eine Progressbar. http://getbootstrap.com/components/#progress

Danach kannst du dann mit Javascript (z.B. mit jquery) das DOM verändern und die breite der Progressbar verändern. Siehe http://api.jquery.com/css/

Sithys · 28. August 2014

Das klingt alles sinnig und danke für die Antwort, aber wie gesagt, ich hab keine Ahnung von Javascript. Klar, die bar mit hinterher mit CSS zurecht basteln ist kein Thema. Auch eine <progress></progress>-bar einzusetzen nicht.

jQuery benutze ich schon, deswegen würde ich gerne auf Bootstrap verzichten. Mit Javascript/jQuery den DOM zu verändern, das ist mein Problem (:

Troublegum · 28. August 2014

wenn du z.B. die Progressbar aus dem ersten Link benutzt:

Code:

<div class="meter">
	<span style="width: 25%"></span>
</div>

dann müsstest du mit

Code:

$(".meter span").css({"width": "50%"});

die Breite der Progressbar auf 50% ändern können.

Sithys · 28. August 2014

Ja klar, aber der Wert ändert sich ja stetig und soll die ganze Zeit angepasst werden, und genau das ist mein Problem :-/

Daaron · 28. August 2014

Im Endeffekt:
- du erzeugst ein <div>, dass deinen gesamten Ladebalken-Platz darstellt. Die Breite von dem Ding ermittelt sich aus den umliegenden Containern oder CSS
- du legst ein <div> in diesen Ladebalken, dass dein eigentlicher Balken ist.
- Da, wo aktuell "statusDom.innerHTML = perc + "% loaded...";" steht, packst du noch ne Kleinigkeit dazu: Du gibst deinem inneren <div> einfach ne Width von perc+'%'.

Yuuri · 28. August 2014

jQuery UI im Einsatz? Das hat schon ne ProgressBar. Ansonsten ist es doch nicht schwer zwei Divs ineinanderzulegen - eins für den Container, eins für den Status - und zusätzlich noch ein Label dazupacken In jQuery kannst du dann einfach mittels

Code:

$('label', $('progressbar-selektor')).text( '5 %' )

den Text des Labels setzen und die Breite der Leiste im Container setzt du einfach mittels simplem CSS

Code:

$('div', $('progressbar-selektor')).css( {width: '5%'} );

So hast du ganz einfach ne simple ProgressBar selbst gebastelt, die dazu noch individuell anpassbar ist (ohne auf das starre progress-Tag zu setzen).

Troublegum · 28. August 2014

Sithys schrieb:
Ja klar, aber der Wert ändert sich ja stetig und soll die ganze Zeit angepasst werden, und genau das ist mein Problem :-/

Aber den Code hast du ja schon.
Da musst du die Veränderung des CSS nur einfügen.

Sithys · 28. August 2014

Hey und danke für Eure ganzen Tipps,

@Daaron ich habs wie folgt versucht ->

Code:

var e1 = document.getElementById("status2");

Code:

ft.onprogress = function(progressEvent) {
	if (progressEvent.lengthComputable) {
		var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
		statusDom.innerHTML = perc + "% loaded...";
		e1.style.width = perc + "%";

Code:

#status {  
    background-color: #f3f3f3;  
    border: 0;  
    height: 18px;  
    width: 90%;
    border-radius: 9px; 
} 

#status2{
    color: green;
    background-color: green;
    width: 180px;
    height: 10px;
}

Code:

<div id="status">
       <div id="status2">
                                  
       </div>
</div>

Funktioniert nur so leider noch nicht, ich bin aber nebenbei noch am Basteln - mach ich was grundlegend verkehrt?

Also, ich habe jetzt einen grünen balken im zweiten div und wenn ich den Upload starte, verschwindet dieser vollständig, es tut sich also was.

Was ist denn mit meiner JS anweisung, mit der variablen e1 und dann perc + "%", und e1.style.width ist das so korrekt?

/Edit: Nächster Versuch, aber geht leider noch nicht:

Code:

ft.onprogress = function(progressEvent) {
	if (progressEvent.lengthComputable) {
		var perc = Math.floor(progressEvent.loaded / progressEvent.total * 100);
		statusDom.innerHTML = perc + "% loaded...";
		document.getElementById("status2").style.width = perc + "%";

Troublegum · 28. August 2014

Welcher CSS-Wert steht denn bei deinem status2-div am Ende des Uploads drin? Mit Firefox draufklicken und "Element untersuchen" anklicken müsste das verraten.

Sithys · 28. August 2014

... ich arbeite ja mit iOS und kann nur dort debuggen ^^ ich kann mir höchstens zum schluss noch mal ausgeben lassen, moment.

alert(document.getElementById("status2").style.width);

der gibt schon mal gar nichts aus x)

Ist der alert verkehrt? Den führt er gar nicht aus, da bricht das Script dann ab!?

Läuft!

document.getElementById("ft-prog").value = perc;

<progress></progress>

John Reese · 28. August 2014

Du arbeitest mit jQuery, nutzt aber document.getElementById()?

Also arbeitest du wohl eher *nicht* mit jQuery...
Mit jQuery wäre es dann sowas wie:

Code:

$("#status2").css("width", perc);

Troublegum · 28. August 2014

Dann lags vllt. auch an der Konkatenierung von Zahl und String ("%")? Keine Ahnung. :-|

Suche

JavaScript Progressbar erstellen und aktualisieren, aber wie?

Sithys

Captain

Troublegum

Lt. Commander

Sithys

Captain

Troublegum

Lt. Commander

Sithys

Captain

Daaron

Fleet Admiral

Yuuri

Fleet Admiral

Troublegum

Lt. Commander

Sithys

Captain

Troublegum

Lt. Commander

Sithys

Captain

John Reese

Lt. Commander

Troublegum

Lt. Commander

Ähnliche Themen