Ladebalken wenn Seite lädt

[Max E.]

Hey SELFhtml Freunde!

Ich habe folgendes Problem: Ich habe ein Upload Script geschrieben, das Bilder hochladen kann. Nun möchte ich, dass wenn man auf Hochladen klickt, ein kleiner Ladebalken kommt der zeigt, dass das Bild hochgeladen wird.

Ich habe auch schon Scripte gefunden, jedoch habe ich keine Ahnug wo ich diese einfügen muss.

Hoffentlich könnt ihr mir helfen.

Danke
Max

[ChrisB]

Hi,

Ich habe auch schon Scripte gefunden, jedoch habe ich keine Ahnug wo ich diese einfügen muss.

Dann lies deren Dokumentation.

MfG ChrisB

[Max E.]

Das habe ich bereits getan aber da finde ich nichts wo steht wo ich es einfügen muss.

[ChrisB]

Hi,

Das habe ich bereits getan aber da finde ich nichts wo steht wo ich es einfügen muss.

Und wenn wir noch nicht mal die Info finden, von welchem Script du überhaupt redest, weil du diese Info komplett unterschlagen hast - dann glaubst du, könnten wir dir da jetzt mehr zu sagen ...?

Das nenne ich jetzt mal (nur) naiv, damit ich nicht anschliessend wieder lesen muss, ich wäre beleidigend geworden.

MfG ChrisB

[Max E.]

<script type="text/javascript">
// JavaScript-Ladebalken mit Prozent-Anzeige
var zaehler = 1;
function load3(ziel) {
 if ( zaehler < ziel) {
  zaehler = zaehler + 1;
  document.getElementById("status3").style.width = zaehler + "px";
 var prozent = Math.round( zaehler/ziel * 100);
  document.getElementById("counter3").innerHTML = prozent+" %";
  window.setTimeout("load3('" + ziel + "')", 25);
 }
 else {
  zaehler = 1;
 }
}
</script>

<div
 style="position: relative;
  width:400px; background-color: #C0C0C0; border: solid 1px #000000;">
<span id="counter3"
 style="position: absolute;
  width: 100%; z-index: 3; text-align: center; font-weight: bold;">0%</span>
<div id="status3"
 style="position: relative;
  background-color: #00FF00; width:0px; height: 22px;
  border-right: solid 1px #000000; z-index: 2;">&thinsp;</div>
</div>

[ChrisB]

Wow - jetzt bin ich geneigt, meine wie angemerkt absichtlich sehr bedacht vorsichtige Wortwahl doch noch zu ändern.

MfG ChrisB

[hotti]

hi,

Ich habe folgendes Problem: Ich habe ein Upload Script geschrieben, das Bilder hochladen kann. Nun möchte ich, dass wenn man auf Hochladen klickt, ein kleiner Ladebalken kommt der zeigt, dass das Bild hochgeladen wird.

Betrachte das Protocol, HTTP: Es besteht im Wesentlichen aus einem Request und einer Response. Der Request ist das Hochladen, die Response kommt, wenn der Request (POST) komplett am Server angekommen ist. Dazwischen kommt nichts, womit Du irgendeine Fortschrittanzeige machen könntest.

Hotti

[MudGuard]

Hi,

Ich habe folgendes Problem: Ich habe ein Upload Script geschrieben, das Bilder hochladen kann. Nun möchte ich, dass wenn man auf Hochladen klickt, ein kleiner Ladebalken kommt der zeigt, dass das Bild hochgeladen wird.

Das machen die meisten Browser doch sowieso schon ...

cu,
Andreas

[Der Martin]

Hallo,

Nun möchte ich, dass wenn man auf Hochladen klickt, ein kleiner Ladebalken kommt der zeigt, dass das Bild hochgeladen wird.
Das machen die meisten Browser doch sowieso schon ...

und im Gegensatz zu einem Javascript oder einem PHP-Script haben sie an der Stelle auch die Möglichkeit, den Fortschrittsbalken wirklich mit der übertragenen Datenmenge im Verhältnis zur Gesamt-Datenmenge abzugleichen, anstatt nur stumpf anhand der vergangenen Zeit zu schätzen.

Ciao,
 Martin

[Max E.]

Hi,

Ich habe folgendes Problem: Ich habe ein Upload Script geschrieben, das Bilder hochladen kann. Nun möchte ich, dass wenn man auf Hochladen klickt, ein kleiner Ladebalken kommt der zeigt, dass das Bild hochgeladen wird.

Das machen die meisten Browser doch sowieso schon ...

cu,
Andreas

Ja klar wird die Seite geladen und angezeigt das sie läd, aber ältere Leute die sich nicht so mit Computern auskennen drücken mehrmals auf den hochlade Button und dann gibt es nur Probleme!

[Sven Rautenberg]

Moin!

Ja klar wird die Seite geladen und angezeigt das sie läd, aber ältere Leute die sich nicht so mit Computern auskennen drücken mehrmals auf den hochlade Button und dann gibt es nur Probleme!

Dann deaktiviere den Button nach dem ersten Klick mit Javascript (disabled), optional gibts noch einen Hinweistext mit "Hochladen..." o.ä.

- Sven Rautenberg

[hotti]

moin,

Ja klar wird die Seite geladen und angezeigt das sie läd, aber ältere Leute die sich nicht so mit Computern auskennen drücken mehrmals auf den hochlade Button und dann gibt es nur Probleme!

Aha, das eigentliche Problem. Du kannst es lösen, indem Du dafür sorgst, dass ein Formular nur _einmal_ abgeschickt werden kann.

Hotti

[Cheatah]

Hi,

Ich habe folgendes Problem: Ich habe ein Upload Script geschrieben, das Bilder hochladen kann. Nun möchte ich, dass wenn man auf Hochladen klickt, ein kleiner Ladebalken kommt der zeigt, dass das Bild hochgeladen wird.

die File-API, die das W3C im Dunstkreis von HTML5 erstellt, ermöglicht Derartiges. Ich verlinke sie absichtlich nicht, weil die Browser-Unterstützung derzeit auf einem ähnlichen Niveau ist wie der Standard selbst ("unfertig"), und die von Dir genannte Zielgruppe (z.B. alte Menschen) potenziell seltener die neuesten Browser installiert hat.

Sprich: Was ich Dir gerade erzählt habe, nützt Dir nichts, und ansonsten gibt es nichts. War aber 'n nettes Gespräch, können wir gerne beizeiten wiederholen.

Cheatah

[Alex]

Hallo,

du hast ja schon zu hören bekommen, dass deine Idee nicht so leicht umzusetzen ist. Das stimmt.

Aber du kannst etwas ähnliches machen, was dem User trotzdem weiterhilft. Auf dieser Seite kannst du dir ein animiertes "Ajaxload" GIF zusammenstellen.
http://www.ajaxload.info/

Ich mache es bei mir so, dass ich das DIV, in dem meine komplette Seite liegt ausblende, wenn jemand etwas hochläd. Dafür blende ich dann ein neues DIV ein, wo dann ein kurzer Hinweisetext zu finden ist und wo darunter das animierte GIF ist.

Dadurch bekommt man zwar nichts vom wahren Upload Status mit, aber es suggeriert dem User trotzdem, dass da etwas passiert und es hält ihn davon ab, etwas anderes zu tun. Im Hintergrund wird über AJAX dann der Upload gemacht und wenn der fertig ist, wird die Seite wieder eingeblendet...

Gruß
Alex

[Max E.]

Aber du kannst etwas ähnliches machen, was dem User trotzdem weiterhilft. Auf dieser Seite kannst du dir ein animiertes "Ajaxload" GIF zusammenstellen.
http://www.ajaxload.info/

Ich mache es bei mir so, dass ich das DIV, in dem meine komplette Seite liegt ausblende, wenn jemand etwas hochläd. Dafür blende ich dann ein neues DIV ein, wo dann ein kurzer Hinweisetext zu finden ist und wo darunter das animierte GIF ist.

Cool genau das habe ich gesucht. Das mit den DIV verstehe ich so halbwegs, aber wie kann ich dann einstellen dass wenn er auf ein input klickt die DIV ändert?

Gruß Max

[Alex]

Hallo,

Cool genau das habe ich gesucht. Das mit den DIV verstehe ich so halbwegs, aber wie kann ich dann einstellen dass wenn er auf ein input klickt die DIV ändert?

Du kannst dem Formular ein onsubmit mitgeben. (http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onsubmit)
Dadurch  wird die Aktion ausgeführt, egal auf wlechem Weg das Formular gesendet wird.

Da musst du dann mit Javascript das DIV ausblenden, bzw. das anderen einblenkden. Hier empfiehlt es sich, mit display = "block" bzw. display = "none" zu arbeiten. Ansprechen kannst du die DIVs über eine ID, die du ihnen vorher geben musst.

Dazu lässt sich über die Suchfunktion/Google sicher leicht etwas finden.

Gruß Alex

[ChrisB]

Hi,

Cool genau das habe ich gesucht.

Dann lerne bitte, in Zukunft auch nach dem zu fragen, was du suchst.

MfG ChrisB

[suit]

Ich mache es bei mir so, dass ich das DIV, in dem meine komplette Seite liegt ausblende, wenn jemand etwas hochläd. Dafür blende ich dann ein neues DIV ein, wo dann ein kurzer Hinweisetext zu finden ist und wo darunter das animierte GIF ist.

Einige der mir bekannten Browser beenden sämtiche Aktivitäten innerhalb des Browserfensters sobald ein HTTP-Request abgesetzt wird, dessen Ziel es ist, einen neuen Inhalt für das Browserfenster anzufordern.

Sprich sämtliche GIF-Animationen werden gestoppt - also keine Animation nach dem Drücken des Submit-Buttons.

[Struppi]

Einige der mir bekannten Browser beenden sämtiche Aktivitäten innerhalb des Browserfensters sobald ein HTTP-Request abgesetzt wird, ...

Welche Browser sollen das sein?

Struppi.

[Der Martin]

Hallo,

Einige der mir bekannten Browser beenden sämtiche Aktivitäten innerhalb des Browserfensters sobald ein HTTP-Request abgesetzt wird, ...
Welche Browser sollen das sein?

mir ist das zumindest vom Internet Explorer bekannt. Sobald man da durch Anklicken eines Links, durch Absenden eines Formulars oder durch Zuweisen eines neuen Werts an location.href eine neue Ressource anfordert, bleiben alle GIF-Animationen stehen, solange die Seite noch sichtbar ist.
AFAIR werden in dieser kurzen Zeitspanne, bis die neue Ressource da ist, auch keine JS-Events mehr ausgelöst (da bin ich mir allerdings nicht ganz sicher).

Asynchrone Operationen, etwa das Nachladen/Austauschen eines Bildes durch Zweisung an ein img.src oder auch eine AJAX-Operation, sind davon nicht betroffen.

Ciao,
 Martin

[Alex]

Hallo,

Asynchrone Operationen, etwa das Nachladen/Austauschen eines Bildes durch Zweisung an ein img.src oder auch eine AJAX-Operation, sind davon nicht betroffen.

Und genau davon - Upload mit AJAX - reden wir hier ;)

Gruß
Alex

[Der Martin]

Hi,

Asynchrone Operationen, etwa das Nachladen/Austauschen eines Bildes durch Zweisung an ein img.src oder auch eine AJAX-Operation, sind davon nicht betroffen.
Und genau davon - Upload mit AJAX - reden wir hier ;)

sicher? Im Eröffnungsposting ging es um "ein Upload Script [...], das Bilder hochladen kann". Da gehe ich von einem Formular mit File-Upload aus, und denke beim Begriff "Script" an die serverseitige Verarbeitung - denn wie sonst will ich mit reinem Javascript eine Datei auswählen und hochladen?

Ciao,
 Martin

[Alex]

Hi,

sicher? Im Eröffnungsposting ging es um "ein Upload Script [...], das Bilder hochladen kann". Da gehe ich von einem Formular mit File-Upload aus, und denke beim Begriff "Script" an die serverseitige Verarbeitung

Das schließt AJAX noch nicht aus und außerdem habe ich darauf hingewiesen (in meinem 1. Posting), dass es bei mir mit AJAX gemacht wird...

Aber ist ja auch egal, jetzt wissen wir ja wovon wir reden und sind uns glaube ich einig...

Gruß
Alex

[ChrisB]

Hi,

sicher? Im Eröffnungsposting ging es um "ein Upload Script [...], das Bilder hochladen kann". Da gehe ich von einem Formular mit File-Upload aus, und denke beim Begriff "Script" an die serverseitige Verarbeitung
Das schließt AJAX noch nicht aus

Doch, Dateiupload schliesst AJAX aus.

(Zumindest derzeit noch, wenn es browserübergreifend funktionieren soll.)

MfG ChrisB

[Struppi]

Einige der mir bekannten Browser beenden sämtiche Aktivitäten innerhalb des Browserfensters sobald ein HTTP-Request abgesetzt wird, ...
Welche Browser sollen das sein?

mir ist das zumindest vom Internet Explorer bekannt. Sobald man da durch Anklicken eines Links, durch Absenden eines Formulars oder durch Zuweisen eines neuen Werts an location.href eine neue Ressource anfordert, bleiben alle GIF-Animationen stehen, solange die Seite noch sichtbar ist.

Also nicht sobald ein http request abgesetzt wird, sondern, wenn der Browser erwartet, dass eine neue Seite geladen wird.

Asynchrone Operationen, etwa das Nachladen/Austauschen eines Bildes durch Zweisung an ein img.src oder auch eine AJAX-Operation, sind davon nicht betroffen.

Eben, daher fande ich diese Aussage etwas mißverständlich.

Struppi.