Tutorial HTML, CSS u. PHP - Forum

[Yamram]

Hey Leute,
dank kanufrosch habe ich jetzt auch mal Ajax verstanden. Heute habe ich viel programmiert, dabei hatte fast alles mit Ajax zu tun. Es macht echt Spaß! Es ist so einfach und toll... Nun habe ich aber Schwierigkeiten an einer besonderen Stelle. Ich möchte mit Ajax einen Fileupload realisieren. Das erwies sich als schwierig. Ganz normal hatte ich den Upload schon fertig geschrieben. Doch, als ich Ajax einsetzen wollte, gab es ein Problem. Wie ihr bestimmt alle wisst, braucht man für einen Upload den Array $_FILES. Aber wie kann ich den erreichen? Das Formular (ich habe das jetzt mal aus meinem Projekt isoliert) sieht so aus:

Code: Alles auswählen

<form method="post" action="javascript:AjaxUpload();" enctype="multipart/form-data">

   <input type="file" name="file" id="file" />
   <input type="submit" name="submit" />
</form>


Das ist ja alles schön und gut, aber wie soll nun der JS-Code aussehen? Vor allen Dingen folgende Zeile ist nun schwierig:

Code: Alles auswählen

request.send('file=' + document.getElementById("file").value);


Wenn ich das so mache, dann übergibt Javascript nur den kompletten Pfad zur Datei, nicht aber den gebrauchten Array $_FILES. Wie kann ich das umsetzen? Ein Fileupload perAjax wäre schon was feines *____*

Mit freundlichen Grüßen,
Philipp E.

[drPHIP132]

Ich weiß nicht ob man dies mit JavaScript realisieren kann, aber wenn ja, dann Lies die Datei aus und du hast einen Ellenlangen Quelltext.
Dann den Code übertragen (wie ajax) und dort als .dateiendung wieder abspeichern (übertragenen code mit php abspeichern).^^

[Yamram]

Öhm, wenn ich das so machen muss, dann lasse ich das mit Ajax lieber direkt (: Dann ist das halt nicht sooo cool, sondern einfach nur cool ((((:

[drPHIP132]

So musst du es nicht machen, aber das ist alles was mir in den Sinn kommt, wie man es machen könnte.^^

[Yamram]

Ich glaube, ich baue alles erstmal ganz normal. Wenn alles läuft, gucke ich dann, was ich mit Ajax umsetzen könnte.

[drPHIP132]

aufjedenfall geht es. (siehe facebook)

[Yamram]

Ja, es gibt auch diverse Tutorials im Internet. Ich habe bei Google gesucht und etwas gefunden, aber ich konnte es nicht anschauen, weil mein Internet "leer" war >.< Ich hasse es...

[DerWaldschrat]

Also, zunächst einmal vorweg: Im Internet-Explorer hast du mit Ajax-Upload keine Chance, zumindest nicht <9 (es sei denn, es gibt da irgendwelche obskuren ActiveX-Objekte, das glaub ich aber nicht).
Ab Firefox 4, Chrome 7 und Safari 5 gibt es aber eine einfache Lösung (auch FF 3.6 geht, dann wirds aber ungemütlich):
https://developer.mozilla.org/en/DOM/XM ... t/FormData
Das FormData-Objekt!
Die Verwendung ist ganz einfach:

Code: Alles auswählen

<script type="text/javascript">
function AjaxUpload() {
  if (FormData && typeof FormData === "function") {
    var data = new FormData(/*DEIN FORMULAR, z.B. über document.getElementById*/),
    xhr = new XMLHttpRequest();
    xhr.open("POST", "fileUpload.php");
    xhr.send(data);
  }
}
</script>


Falls du weitere Fragen hast, einfach stellen!
DerWaldschrat

[Yamram]

@DerWaldschrat:

Puhh, das hört sich gut an aber ging mir jetzt ein wenig zu schnell :/ Also, das nehme ich an: Das action-Attribut des Uploadformulars muss ich auf javascript:AjaxUpload(); legen. Dann wird beim Drücken des Submit Buttons die Funktion ausgeführt. In der Funktion diese if-Abfrage verstehe ich überhaupt nicht. Was soll das bedeuten und warum drei gleich-Zeichen oder ist das nur ein Schreibfehler? Anschließend erstellst du eine Variable names data, in der das ganz Formular sein soll? Oder nur das input-Feld mit der Datei? Die nächste beiden Zeilen verstehe ich, weil ich ein wenig Ajax kann. Dann frage ich mich aber, wie die du einfach data in das send() reinpackst? Kannst du mir das nochmal erklären?

[Sören]

In der if-Abfrage wird ganz einfach überprüft, ob der Browser FormData kennt, zuerst wird geprüft, ob FormData existiert (wenn es existiert ist der erste Teil der if-Abfrage true) und dann, ob es eine Funktion ist.

Das FormData-Objekt kann in einem XMLHttpRequest key/value-Paare von Formularen (also die Werte der Input-Felder, einschließlich Dateien) senden.
Daher werden data sozusagen die Daten deines Formulars zugewiesen (was eben auch hochzuladende Dateien seien können).
Diese Daten werden dann eben beim senden der Ajax-Anfrage mitgeschickt.
Zitat aus DerWaldschrats Quelle:

Using FormData objects

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data".