php File Upload mit Progress Bar (AJAX)

**Chrissi007** · 22.01.2009, 19:44

Kennt keiner eine Javascriptfunktion, die das Ergebnis einer php-Seite auslesen kann?

**ghostgambler** · 22.01.2009, 19:51

Google(AJAX).
AJAX macht genau was du willst - nur ggf. mit XML und JSON und was noch alles. Kann aber auch einfach nur plain text.

**fireweasel** · 24.01.2009, 11:45

Original geschrieben von Chrissi007
Kennt keiner eine Javascriptfunktion, die das Ergebnis einer php-Seite auslesen kann?

Es gibt keine einfache Funktion. Um Requests an Webserver zu schicken und die Antworten auszuwerten, gibt es das XMLHTTPRequest-Objekt. Das ist der Kern des modernen Remote-Scriptings, oder AJAX, wie es vom Marketing getauft wurde.

Wie man das XMLHTTPRequest-Objekt benutzt, erfährst du (unter Anderem) hier:
http://ajaxpatterns.org/XMLHttpRequest_Call
und hier:
http://developer.apple.com/internet/...mlhttpreq.html

Für eine Upload-Progress-Anzeige reicht es meistens, wenn das antwortende Server-Script einen zweizeiligen Text liefert: Erste Zeile "hochgeladene Bytes", zweite Zeile "insgesamt hochzuladene Bytes". XML- oder JSON-formatierte Daten zu versenden, macht nur das Server-Script aufwändiger als nötig.

**derHesse** · 25.01.2009, 09:55

Warum wieder mal das Rad neu erfinden ...

http://swfupload.org/

oder mit Mootools:
http://digitarald.de/project/fancyupload/

nutzt zwar alles kein PECL, tut aber das was du im Endeffekt willst

**fireweasel** · 26.01.2009, 17:37

Original geschrieben von derHesse
Warum wieder mal das Rad neu erfinden ...

http://swfupload.org/

oder mit Mootools:
http://digitarald.de/project/fancyupload/

nutzt zwar alles kein PECL, tut aber das was du im Endeffekt willst

Nunja, Flash-Scripts einzuspannen um Dateien hochzuladen, ist wohl eher vom Typ "Rad neu erfinden". Schließlich können das Browser schon seit Jahrzehnten ohne Plugin[3].

Und was die JavaScript-Lösung angeht: Ich kenne MooTools zwar allenfalls oberflächlich, aber ES GIBT (BISHER[1]) KEINE REINE JAVASCRIPT-LÖSUNG für File-Uploads mit Progress-Bar, schlicht und ergreifend deshalb, weil der Server den Upload-Fortschritt ermitteln muss -- mit JavaScript kommt man da (bisher[1]) nicht ran. Und PHP ist so ein Sonderfall, da ist der Fileupload so verkorkst gelöst[2], da braucht es halt diese komische PECL-Erweiterung, die nur für diesen einen Zweck erfunden wurde. Mit Perl, Python oder anderen sinnvollen Server-Sprachen kommt man an die File-Upload-Daten wesentlich einfacher ran.

--
[1] Die Browser geben die Infos bisher nicht raus. Könnte sich aber ändern.
[2] Frei nach dem alten IT-Motto: "Unsere Lösung -- Ihr Problem!"
*und_nachschieb*
[3] Dass ein Flash-Script den Komfort beim Datei-Upload verbessern kann, ist klar.

**unset** · 26.01.2009, 18:54

Original geschrieben von fireweasel
[B]Nunja, Flash-Scripts einzuspannen um Dateien hochzuladen, ist wohl eher vom Typ "Rad neu erfinden". Schließlich können das Browser schon seit Jahrzehnten ohne Plugin.

Für die Flash-Lösung spricht im allgemeinen auch eher, dass man auf einen Wisch mehrere Dateien hochladen kann, ohne die vorher packen zu müssen.

Das dass ganze nur in bestimmten Browser/Betriebssystem-Kombinationen gut funktioniert, macht es dann aber auch wieder überflüssig.

**ghostgambler** · 26.01.2009, 19:45

Original geschrieben von unset
Das dass ganze nur in bestimmten Browser/Betriebssystem-Kombinationen gut funktioniert, macht es dann aber auch wieder überflüssig.

Nein. Es bricht es maximal auf ein Goodie runter.
Wer 200 Bilder hoch laden will, und das möglichst einfach, muss dann halt Flash haben - und wird sich dann über diese Lösung garantiert freuen. Man stelle sich jedoch mal vor man müsste 200 Bilder über ein normales HTML-Formular einzeln auswählen und hoch laden ... zumindest ich hab noch andere Dinge zutun...

Alternativ bieten sich noch Lösungen über z.B. ZIP-Datei an, mit dem Problem, dass wenn der Transfer in der Mitte des 500MB Files abbricht, man noch mal von ganz vorne anfangen kann...

in kurz: Ich würde nicht behaupten, dass die Flash-Lösungen überflüssig wären.

**unset** · 26.01.2009, 19:47

Original geschrieben von ghostgambler
Nein. Es bricht es maximal auf ein Goodie runter.
Wer 200 Bilder hoch laden will, und das möglichst einfach, muss dann halt Flash haben

Das reicht aber noch nicht aus ...

**Chrissi007** · 01.02.2009, 20:56

danke für eure hilfe - hat mir sehr geholfen!

ps: bin auch zwischenzeitlich noch über folgende seite gestoßen, vielleicht für den ein oder anderen noch interessant: http://ajax.frozenfox.at/

**Chrissi007** · 01.02.2009, 21:00

Eine Frage hätte ich noch diesbezüglich.

Ich lass mir momentan per RequestObjekt php-seitig generierten HTML-Quelltext zurückgeben.

Code:

var content = request.responseText;
// den Inhalt des Requests in das <div> schreiben
document.getElementById('show_file_progress').innerHTML = content;

request.responseText ist der Inhalt, der dabei vom php-Script erzeugt und von Javascript empfnagen wird. Wie ihr seht speicher ich das ganze Zeug in der Variable $content ab und verändere dann das div dementsprechend, indem ich das innerHTML des divs den Inhalt aus content übergebe.

In diesem Content habe ich jetzt aber auch noch eine Javascript-Anweisung eingebaut.

Code:

[... hier weiter oben ist HTML-Quelltext...]
<script type="text/javascript">
	rolldown_show("upload_in_progress");
</script>

kurz: dieser Codeschnippsel soll einfach eine Javascript-Funktion aufrufen.
Allerdings wird rolldown_show(); nie aufgerufen.

Ich hab auch schon so Sachen probiert wie ein eval() um den ganzen Bereich zu setzen, allerdings bringt das auch nichts.

Weiß jemand an was das liegen könnte, dass das Javascript nicht ausgeführt wird?

**ghostgambler** · 01.02.2009, 21:56

Google...
Bist 100%tig nicht der erste mit dem Problem.
(Das weiß ich weil ich es auch schon hatte...)

**fireweasel** · 02.02.2009, 19:31

Original geschrieben von Chrissi007
Eine Frage hätte ich noch diesbezüglich.

Ich lass mir momentan per RequestObjekt php-seitig generierten HTML-Quelltext zurückgeben.

Warum?
Hatte ich nicht schon erwähnt, dass es vollkommen genügt, nur die Daten zu übermitteln?
Ob als XML, JSON, CSV oder sonst wie ist egal, aber bitte NUR DIE DATEN und nicht die halbe Darstellungslogik (HTML + JavaScript)!

Code:

var content = request.responseText;
// den Inhalt des Requests in das <div> schreiben
document.getElementById('show_file_progress').innerHTML = content;

request.responseText ist der Inhalt, der dabei vom php-Script erzeugt und von Javascript empfnagen wird. Wie ihr seht speicher ich das ganze Zeug in der Variable $content ab und verändere dann das div dementsprechend, indem ich das innerHTML des divs den Inhalt aus content übergebe.

In diesem Content habe ich jetzt aber auch noch eine Javascript-Anweisung eingebaut.

Das ist noch schlimmer als bei jedem Request unnötig die HTML-Daten zu übertragen. Wo, zum Geier, hast du gelernt, dass man ausführbaren Code per Remote-Scripting zum Client schicken soll? Sagt dir das Wort "Code-Injection" nichts?

Code:

[... hier weiter oben ist HTML-Quelltext...]
<script type="text/javascript">
	rolldown_show("upload_in_progress");
</script>

kurz: dieser Codeschnippsel soll einfach eine Javascript-Funktion aufrufen.
Allerdings wird rolldown_show(); nie aufgerufen.

Und was spricht dagegen, die Funktion, die die lustige Animation durchführt, schon beim erstmaligen Laden des HTML-Dokuments einzubinden? Und dann nur noch nach jedem Poll mit den passenden Parametern aufzurufen, anstatt das Ganze jedesmal per XMLHTTPRequest anzufordern in den DOM-Baum einzufügen und dann (in Unkenntnis der Sachlage) zu versuchen, darin eingebasteltes JavaScript auszuführen?

Weiß jemand an was das liegen könnte, dass das Javascript nicht ausgeführt wird?

Hmmm, der Browser ist sich anscheinend sicher, dass der von dir gewählte Weg keine gute Idee ist. Du solltest auf ihn hören ... ;-)

**Chrissi007** · 02.02.2009, 23:29

Das kommt dabei raus wenn ein Jscript Noob versucht ne AJAX-Anwendung zu bauen...

Ach schei... ich hab echt keinen blaßen Schimmer...

Könntest du mir vielleicht noch eine kleine Info mir mit auf den Weg geben: Wie ich mit php json-enkodierte Dinge erstelle und an Javascript sende ist mir soweit klar, aber wie krieg ich intern in Javascript dieses Json-Zeugs in eine Variable rein? Also ich muss die json-enkodierte Zeichenkette, die von php kommt, in Javascript ja irgendwie ausführen, oder?

Das ist noch schlimmer als bei jedem Request unnötig die HTML-Daten zu übertragen. Wo, zum Geier, hast du gelernt, dass man ausführbaren Code per Remote-Scripting zum Client schicken soll? Sagt dir das Wort "Code-Injection" nichts?

Ich versteh deine Besorgnis und Code-Injection sagt mir schon was. Nur wusste ich nicht, dass das im Zusammenhang mit Javascript auch ne Rolle spielen kann. Ich mein... hmm... ich seh nicht so genau, an welcher Stelle hier ein Angriff möglich wäre? Der Client empfängt ja nur Daten aus einem Script. Und das Script könnte ich ja genauso gut auch per Browser aufrufen.

**PHP-Desaster** · 03.02.2009, 09:17

Schau dir doch mal die Element.update-Methode von Prototype an, die kann genau, was du suchst.
Btw: Ich finde das direkte Übergeben von HTML an den Browser nicht komplett daneben. Klar, eine saubere JSON - oder wie auch immer - Schnittstelle ist eindeutig sauberer, aber das direkte übergeben von HTML hat den Charm, das ich diese gerenderten Abschnitte auch direkt ohne Ajax verwenden kann und nicht zwei verschiedene Formate unterstützen muss. Gerade für etwas kurzfristige oder zeitkritische Projekte eine einfache Alternative, um trotzdem den Ajax-Vorteil nutzen zu können.

php File Upload mit Progress Bar (AJAX)