Fileupload mit Ajax realisieren

  • 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.

  • 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).^^

  • 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

  • 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?

  • 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 &quot;[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".

  • 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

    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!

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

    https://wiki.selfhtml.org/wiki…pRequest#JavaScript-Datei

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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!