Fileupload mit Ajax realisieren

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

<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

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.

unkown-6363

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 ((((:

unkown-6363

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.

unkown-6363

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/XMLHttpRequest/FormData">https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData
Das FormData-Objekt!
Die Verwendung ist ganz einfach:

Code

<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:

Zitat von "[url=https://developer.mozilla.org/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects

Mozilla Developer Network[/url]"]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".

Dorty

Hallo zusammen, der Thread ist ja schon Jahre alt aber liefert genau zu meiner Frage (fast) die Antwort.

Ich scheine so wie Sören auch einen Teil nicht zu verstehen.

Mein html Teil:

Code

<form method="post" action="javascript:AjaxUpload();" enctype="multipart/form-data">
    <input type="file" name="file" id="file" />
    <input type="submit" name="submit" />
</form>

mein JavaScript Teil

Code

function AjaxUpload() {
  if (FormData && typeof FormData === "function") {
    var file = document.getElementById("file");
    var data = new FormData(file),
    xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php");
    xhr.send(data);
  }
}

und zuletzt mein php code

PHP

<?php
    $uploaddir = './upload/';
    $uploadfile = $uploaddir . basename($_FILES['file']['name']);

    echo '<pre>';
    if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
        echo "Datei ist valide und wurde erfolgreich hochgeladen.\n";
    } else {
        echo "Möglicherweise eine Dateiupload-Attacke!\n";
    }

    echo 'Weitere Debugging Informationen:';
    print_r($_FILES);

    print "</pre>";

?>

Alles anzeigen

Wenn ich auf den Submit Button klicke, passiert nichts. Ich habe hier schon etwas am Ajax Teil versucht zu ändern, z.B. xhr.open noch ein "true" ergänzt, aber alles ohne Erfolg. Vielleicht sieht ja einer beim Überfliegen der Schnippsel, woran es hängen könnte.

In jedem Fall schon mal vielen Dank für die Unterstützung!

Sempervivum

Nachdem ich die Erzeugung von formData entspr. dem Muster bei selfhtml geändert habe, funktioniert es:

Code

<form method="post" action="javascript:AjaxUpload();" enctype="multipart/form-data">
        <input type="file" name="file" id="file" />
        <input type="submit" name="submit" />
    </form>
    <script>
        function AjaxUpload() {
            if (FormData && typeof FormData === "function") {
                //var file = document.getElementById("file");
                //var data = new FormData(file),
                var data = new FormData(document.querySelector('form')),
                    xhr = new XMLHttpRequest();
                xhr.open("POST", "uploaddorty.php");
                xhr.addEventListener('load', function (event) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.responseText);
                    } else {
                        console.warn(xhr.statusText, xhr.responseText);
                    }
                });
                xhr.send(data);
            }
        }
    </script>

Alles anzeigen

https://wiki.selfhtml.org/wiki/JavaScrip…avaScript-Datei

Den Eventlistener braucht man nicht unbedingt; ich habe ihn zu Testzwecken eingebaut.

Jetzt mitmachen!