Dateiupload mit AJAX

[Christian unregistered]

Hallo,

ich möchte ein Dateiupload mit AJAX schreiben aber ich weiß nicht wie ich die Datei versenden kann.

Die Verarbeitung des Uploads wird dann mit PHP geregelt.
Mit dem Konstrukt kann ich den Inhalt des Dateifeldes auslesen:

  
request.open("POST", 'safe_file.php', true);  
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
request.send("file="+document.getElementById('file_input_field').value);  

Dann steht im $_POST-Array der Name der Datei.
Wie krieg ich die Datei aber in das $_FILES-Array?

Muss ich bei request.open statt "POST" vielleicht "FILES" angeben? Gibt es sowas?
Oder muss ich bei request.send ansetzen?

Wär sehr dankbar wenn mir da jemand weiter helfen kann.

Christian

[Der Martin]

Hi,

ich möchte ein Dateiupload mit AJAX schreiben aber ich weiß nicht wie ich die Datei versenden kann.

das hätte mich auch verblüfft ...

request.open("POST", 'safe_file.php', true);

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send("file="+document.getElementById('file_input_field').value);

  

> Dann steht im $\_POST-Array der Name der Datei.  
  
Klar, mehr hast du ja auch nicht reingeschrieben.  
  

> Wie krieg ich die Datei aber in das $\_FILES-Array?  
  
Mit Javascript gar nicht, weil Javascript nicht auf Dateien zugreifen kann. Ein AJAX-Upload könnte also nur Informationen hochladen, die bereits Teil des Dokuments sind, z.B. der Inhalt eines textarea-Elements.  
  

> Muss ich bei request.open statt "POST" vielleicht "FILES" angeben? Gibt es sowas?  
  
Nein.  
  
So long,  
 Martin  

-- 
Dem Philosoph ist nichts zu doof.  

[LX]

So funktioniert das nicht. Du kannst aus Sicherheitsgründen in JavaScript nicht auf lokale Dateien zugreifen, um sie bspw. hochzuladen - zumindest im Moment noch nicht (sobald die File API vom W3C überall unterstützt wird, ändert sich das). Unter einem AJAX-Upload versteht man im Moment eher, dass auf der Seite, die daraufhin ausgeliefert wird, per AJAX regelmäßig der Upload-Status angezeigt wird.

Was Du willst, läßt sich im Moment nur mit Flash, Java oder vergleichbaren Techniken realisieren.

Gruß, LX

[Christian unregistered]

Hallo LX,

mh das ist ja eher ungünstig für mich weil der Upload in einer Lightbox stattfinden soll und da soll die Seite ja nicht neu geladen werden.

Eine unschöne Variante die mir noch einfällt wäre, das Ganze in ein iFrame zu betten um den Seitenreload zu "verschleiern" und das Formular "ganz normal darin abzuschicken".

Ist so etwas aufwendig mit Flash zu lösen?
Sonst würde ich vermutlich versuchen mich soweit damit zu befassen.

Christian

[Der Martin]

Hallo,

Eine unschöne Variante die mir noch einfällt wäre, das Ganze in ein iFrame zu betten um den Seitenreload zu "verschleiern" und das Formular "ganz normal darin abzuschicken".

ja, das könnte funktionieren - aber nur dann, wenn der User wie gewohnt *selbst* die Datei auswählt. Mit Javascript kannst du auch den Inhalt des File-Upload-Feldes nicht vorbelegen (auch ein Sicherheitsaspekt, sonst könnte jede Webseite lustig Dateien der Besucher unbemerkt hochladen).

Ist so etwas aufwendig mit Flash zu lösen?

Keine Ahnung. Zumindest schließt es aber ein paar User aus (nämlich die ohne Flash-Plugin).

Ciao,
 Martin

[Christian unregistered]

Hallo Martin,

ja, das könnte funktionieren - aber nur dann, wenn der User wie gewohnt *selbst* die Datei auswählt. Mit Javascript kannst du auch den Inhalt des File-Upload-Feldes nicht vorbelegen (auch ein Sicherheitsaspekt, sonst könnte jede Webseite lustig Dateien der Besucher unbemerkt hochladen).

Ja sicher, was anderes soll auch nicht passieren.
Das Eingabefeld vorzubelegen wär grob fahrlässig.

Keine Ahnung. Zumindest schließt es aber ein paar User aus (nämlich die ohne Flash-Plugin).

Und die mit zusätzlichem Flashblocker ;)

Christian

[raw-venture-ad]

Ist so etwas aufwendig mit Flash zu lösen?

In unserem Geschäfts-Intranet (Flash immer aktiviert) benutzen wir sehr erfolgreich die geniale SWF-Upload Klasse: http://swfupload.org/

Im Internet würde ich für die Flash-Blocker eine Alternative über ein normales Formular + Iframe anbieten.

[hotti]

So funktioniert das nicht. Du kannst aus Sicherheitsgründen in JavaScript nicht auf lokale Dateien zugreifen, um sie bspw. hochzuladen - zumindest im Moment noch nicht (sobald die File API vom W3C überall unterstützt wird, ändert sich das).

Ich hab mal irgendwo gelesen, dass über about:config diese (derzeitige) Sicherheitseinstellung ausgeknirpst werden kann, weiß aber nicht mehr wo, hab das auch nicht ausprobiert und das macht sowieso keiner freiwillig ;-)

Horst Hackebart

[Christian unregistered]

Hallo,

also wenn ich den Upload in einem iframe behandele, kann ich dann auch dem Elternfenster irgendwie bescheid geben wenn der Upload fertig ist?
Oder andersrum, kann ich das iframe überwachen bis der Upload fertig ist?

Christian

[Der Martin]

Hi,

also wenn ich den Upload in einem iframe behandele, kann ich dann auch dem Elternfenster irgendwie bescheid geben wenn der Upload fertig ist?

ja, mit parent.func() kannst du direkt auf Funktionen (bzw. Variablen) des Parent-Fensters zugreifen. Die Server-Antwort, die nach dem Upload kommt, kann sich also auf diese Weise "zurückmelden".

Oder andersrum, kann ich das iframe überwachen bis der Upload fertig ist?

Nicht zuverlässig. Zwischen dem Beginn des Formularversands und dem Eintreffen der Antwort ist das Dokument in einem Zustand zwischen wach und tot, in dem der Zugriff auf die darin enthaltenen Objekte nicht garantiert ist.

So long,
 Martin

[Christian unregistered]

Hallo Martin,

also wenn ich den Upload in einem iframe behandele, kann ich dann auch dem Elternfenster irgendwie bescheid geben wenn der Upload fertig ist?

ja, mit parent.func() kannst du direkt auf Funktionen (bzw. Variablen) des Parent-Fensters zugreifen. Die Server-Antwort, die nach dem Upload kommt, kann sich also auf diese Weise "zurückmelden".

Woher bekomme ich die Server-Antwort? Automatisch?
Wenn ich das Upload-Formular abschicke werden verschiedene PHP-Funktionen ausgeführt und das Formular erneut angezeigt damit man weitere Dateien hochladen kann.
Wie stelle ich denn fest, dass der Upload erfolgreich war?
Bzw wie teile ich das dem Script mit?

Die Reihenfolge wär wohl: Formular->Upload/Fehler->Formular->bei Upload den Eltern bescheid sagen

Christian

[Der Martin]

Hi Christian,

ja, mit parent.func() kannst du direkt auf Funktionen (bzw. Variablen) des Parent-Fensters zugreifen. Die Server-Antwort, die nach dem Upload kommt, kann sich also auf diese Weise "zurückmelden".
Woher bekomme ich die Server-Antwort? Automatisch?

natürlich, das ist HTTP:
Anfrage an Server -> Verarbeitung der Anfrage durch Server -> Antwort an Client ("neue Seite"). Das ist der normale Ablauf der Formularverarbeitung.

Wie stelle ich denn fest, dass der Upload erfolgreich war?

Indem die serverseitige Logik, die die Formulardaten bearbeitet, das untersucht und dem Client mit der Antwortseite mitteilt.

Bzw wie teile ich das dem Script mit?

Die Antwortseite könnte je nach Erfolg oder Misserfolg unterschiedlich generiert werden. Das wäre das Nächstliegende.

Die Reihenfolge wär wohl: Formular->Upload/Fehler->Formular->bei Upload den Eltern bescheid sagen

Genauer:
  * Formular im iframe wird abgeschickt
  * Server empfängt Formulardaten
  * Server prüft, ob Daten vollständig und Upload fehlerfrei
  * Server generiert eine Antwortseite mit Info über Ergebnis(*)
  * Server schickt Antwort zum Client
  * Client empfängt Antwortdokument (evtl. in unsichtbarem iframe)
  * Client führt Javascript in der Antwortseite aus
  * Javascript ruft eine Funktion im Elterndokument auf und meldet Ergebnis

Die (*) Info über das Ergebnis könnte beispielsweise sein, dass im Javascript-Funktionsaufruf parent.func() ein Parameter übergeben wird, der den Status beschreibt.

So long,
 Martin