23

AUG09

Asynchroner-Upload ohne AJAX

Trackback URIVon Peppie in Javascript, PHP, Programmierung

Als ich letztens in meinem Google-Mailaccount war und eine E-Mail mit Anhang verfasst habe, ist mir aufgefallen das Google den Anhang schon hochläd während man noch die E-Mail verfasst. Zudem geht nach der Auswahl einer Datei direkt danach eine neue “Upload”-Box auf, mit der man weitere Dateien anwählen kann. Dieses System fand ich ganz nett und hab mir gedacht, das kann ich auch! :D
Für jeden der nicht weiß was ich genau mein hier ein Screen aus GoogleMail:

googleUpload

Als Ziel für das ganze hatte ich mir vorgenommen dieses Upload-Script komplett ohne AJAX zu schreiben, also wie macht man das wohl am besten?

Ich lasse mir mit Javascript eine Upload-Box ausgeben die in Ihrem FORM-Element das Target eines IFrames bekommt, dass für jeden Benutzer aber unsichtbar ist. Klickt der Benutzer dann auch “Hochladen” wird die aktuelle Upload-Box unsichtbar, im Hintergrund wird dann die Datei über das IFrame hochgeladen und eine neue Upload-Box wird erstellt. Damit der Benutzer sehen kann das sich hier auch etwas tut, habe ich eine kleine Statusbox eingefügt, die einem zeigt welche Dateien noch im Upload sind.

In einer weiteren Box lassen ich dann noch alle erfolgreich hochgeladenen Dateien anzeigen und damit ist das ganze dann perfekt! Für alle die an diesem Script interesse haben, können es sich hier anschauen: http://www.peppies-life.de/scripts/cMultiUploader/ und auf der nächsten Seite auch Downloaden!

Seite:

1 2

Über den Autor:

Vor mehr als 6 Jahren habe ich mein Hobby zum Beruf gemacht. Seit her bekommt mich kein Problem so schnell in die Knie, ich bin sehr verbissen und arbeite solange an einem Problem bis es gelöst ist.