Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Dateien mit AJAX hochladen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Ich kann anscheinend nicht das Ende des Spaßes erreichen, den Sie mit aufkommenden Web-Technologien machen können. Heute werde ich Ihnen zeigen, wie Sie etwas tun können, das bis vor kurzem fast beispiellos war: Hochladen von Dateien über AJAX.

Sicher, es gab Hacks. Aber wenn Sie wie ich sind und sich jedes Mal schmutzig fühlen, wenn Sie iframe eingeben, werden Sie dies sehr mögen. Begleite mich nach dem Sprung!

Suchen Sie nach einer schnellen Lösung?

Wenn Sie nach einer schnellen Lösung suchen, finden Sie bei Envato Market eine großartige Sammlung von Datei-Upload-Skripts und -Anwendungen.

Dieser HTML5-Datei-Uploader ist besonders einfach - Sie können Dateien ganz einfach hinzufügen, indem Sie sie per Drag & Drop ziehen oder auf klicken.  Alle Dateien werden über AJAX hochgeladen oder können innerhalb eines Formulars hinzugefügt werden. Dateien können vor dem Hochladen umbenannt werden. Eine großartige, schnelle Lösung, wenn Sie danach suchen!


Warum bekommen wir die schlechten Nachrichten nicht mit?

Das funktioniert nicht in jedem Browser. Mit einigen progressiven Verbesserungen (oder was auch immer das aktuelle Schlagwort ist), haben wir eine Upload-Seite, die direkt bis IE6 funktioniert (allerdings ohne die AJAXy-Bits).

Unser AJAX-Upload funktioniert, solange FormData verfügbar ist. Andernfalls erhält der Benutzer einen normalen Upload.

Unser Projekt besteht aus drei Hauptkomponenten.

  • Das multiple Attribut für das Dateielement input.
  • Das FileReader-Objekt aus der neuen Datei-API.
  • Das FormData-Objekt aus XMLHttpRequest2.

Wir verwenden das multiple-Attribut, damit der Benutzer mehrere Dateien für den Upload auswählen kann (das Hochladen mehrerer Dateien funktioniert auch dann, wenn FormData nicht verfügbar ist). Wie Sie sehen, können Sie mit FileReader die Benutzer-Miniaturen der hochzuladenden Dateien anzeigen (wir erwarten Bilder).

Keines unserer drei Features funktioniert in IE9, daher erhalten alle IE-Benutzer eine normale Upload-Erfahrung (obwohl ich die Unterstützung für `FileReader` in IE10 Dev Preview 2 verstehen kann). FileReader funktioniert nicht in der neuesten Version von Safari (5.1), daher werden die Miniaturbilder nicht angezeigt, sie erhalten jedoch den AJAX-Upload und die Bestätigungsnachricht.  Opera 10.50 bietet FileReader-Unterstützung, jedoch keine FormData-Unterstützung. Daher erhalten sie Thumbnails, aber normale Uploads.

Lassen Sie uns die Codierung erhalten!


Schritt 1: Markup und Styling

Beginnen wir mit einigen grundlegenden Markierungen und Stilen. Natürlich ist dies nicht der Hauptteil dieses Tutorials. Ich werde Sie nicht wie einen Neuling behandeln.

Das HTML

Ziemlich einfach, oder? Wir haben ein Formular, das in upload.php veröffentlicht wird, das wir uns in einem zweiten und einem einzigen Eingabeelement vom Typ file ansehen Beachten Sie, dass es das boolesche Attribut multiple hat, mit dem der Benutzer mehrere Dateien gleichzeitig auswählen kann.

Das ist wirklich alles, was man hier sehen kann. Lassen Sie uns weitermachen.

Das CSS

Absolut keine Schocker hier.


Schritt 2: Das PHP

Wir müssen auch in der Lage sein, die Dateiuploads am Backend zu handhaben.

upload.php

Bedenken Sie, dass dies die ersten PHP-Zeilen waren, die ich in einem Jahr geschrieben habe (ich bin ein Ruby-Typ). Sie sollten wahrscheinlich etwas mehr für die Sicherheit tun; wir stellen jedoch lediglich sicher, dass keine Upload-Fehler auftreten.  Wenn dies der Fall ist, verwenden wir die integrierte move_uploaded_file, um sie in einen uploads-Ordner zu verschieben. Vergessen Sie nicht sicherzustellen, dass der Ordner beschreibbar ist.

Wir sollten also jetzt ein funktionierendes Upload-Formular haben. Sie wählen ein Bild aus (mehrere, wenn Sie möchten und Ihr Browser lässt Sie), klicken Sie auf die Schaltfläche "Dateien hochladen!" und Sie erhalten die Meldung "Bilder erfolgreich hochgeladen".

So sieht unser Mini-Projekt bisher aus:

The styled form

Die gestaltete FormAber komm schon, es ist 2011: Wir wollen mehr als das. Sie werden feststellen, dass wir jQuery und eine upload.js-Datei verlinkt haben. Lassen Sie uns jetzt aufbrechen.


Schritt 3: Das JavaScript

Verschwenden wir keine Zeit: los geht's!

Hier beginnen wir mit Wir erstellen zwei Variablen: input ist unser Dateieingabeelement; formdata wird verwendet, um die Bilder an den Server zu senden, wenn der Browser das unterstützt.  Wir initialisieren sie auf false und prüfen, ob der Browser FormData unterstützt. Wenn das der Fall ist, erstellen wir ein neues FormData-Objekt.  Wenn wir die Bilder mit AJAX einreichen können, brauchen Sie die Schaltfläche "Bilder hochladen" nicht, damit wir sie ausblenden können. Warum brauchen wir es nicht? Nun, wir laden die Bilder automatisch hoch, sobald der Benutzer sie ausgewählt hat.

Der Rest des JavaScript wird in Ihre anonyme selbstaufrufende Funktion übernommen. Als nächstes erstellen wir eine kleine Hilfsfunktion, die die Bilder anzeigt, sobald der Browser sie hat:

Die Funktion benötigt einen Parameter: die Bildquelle (wir werden sehen, wie wir das bald bekommen). Dann finden wir einfach die Liste in unserem Markup und erstellen ein Listenelement und ein Bild.  Wir setzen die Bildquelle auf die Quelle, die wir erhalten haben, legen das Bild in das Listenelement und das Listenelement in die Liste. Voila!

Als Nächstes müssen wir die Bilder tatsächlich aufnehmen, anzeigen und hochladen. Wie bereits gesagt, tun wir das, wenn das onchange-Ereignis für das Eingabeelement ausgelöst wird.

Wir müssen uns keine Gedanken über das proprietäre Ereignismodell von IE machen, da IE9+ die Standardfunktion addEventListener unterstützt.

Es gibt noch mehr, aber fangen wir damit an.Zunächst einmal müssen wir uns nicht um das proprietäre Ereignismodell von IE kümmern, da IE9+ die standardmäßige addEventListener-Funktion unterstützt (und IE9 und Down unterstützen unsere neuen Funktionen nicht).

Was möchten wir also tun, wenn der Benutzer Dateien ausgewählt hat? Zunächst erstellen wir einige Variablen. Das einzig Wichtige ist jetzt len = this.files.length.  Auf die vom Benutzer ausgewählten Dateien kann über das Objekt this.files zugegriffen werden. Im Moment beschäftigen wir uns nur mit der length-Eigenschaft, also können wir die Dateien durchlaufen.… 

und genau das machen wir jetzt. In unserer Schleife setzen wir die aktuelle Datei in eine file, um den Zugriff zu erleichtern. Als Nächstes bestätigen wir, dass es sich bei der Datei um ein Bild handelt.  Wir können dies tun, indem wir die type-Eigenschaft mit einem regulären Ausdruck vergleichen. Wir suchen nach einem Typ, der mit "image" beginnt und von irgendetwas gefolgt wird. (Der Doppelknopf vorne konvertiert das Ergebnis einfach in einen booleschen Wert.)

Was machen wir also, wenn wir ein Bild in unseren Händen haben?

Wir prüfen, ob der Browser das Erstellen von FileReader-Objekten unterstützt. Wenn ja, erstellen wir einen. 

So verwenden wir ein FileReader-Objekt: Wir übergeben unser file-Objekt an die reader.readAsDataURL-Methode. Dadurch wird eine data url für das hochgeladene Bild erstellt.  Es funktioniert jedoch nicht so, wie Sie es erwarten. Die Daten-URL wird nicht von der Funktion zurückgegeben. Stattdessen ist die Daten-URL Teil eines Ereignisobjekts.

Zu diesem Zweck müssen wir eine Funktion für das Ereignis reader.onloadend registrieren. Diese Funktion nimmt ein Ereignisobjekt, durch das wir die Daten-URL erhalten: Es ist bei e.target.result (ja, e.target ist das reader-Objekt, aber ich hatte Probleme, wenn ich anstelle von e.target innerhalb dieser Funktion reader verwende).  Wir übergeben diese Daten-URL nur an unsere showUploadedItem-Funktion (die wir oben geschrieben haben).

Als Nächstes prüfen wir das Objekt formdata. Wenn der Browser FormData unterstützt, ist formdata ein FormData-Objekt. Andernfalls wird es false sein.  Wenn wir also ein FormData-Objekt haben, rufen wir die append-Methode auf. Der Zweck eines FormData-Objekts besteht darin, Werte zu speichern, die Sie über ein Formular senden. Die append-Methode nimmt also einfach einen Schlüssel und einen Wert.  In unserem Fall ist unser Schlüssel images[]; Durch das Hinzufügen der eckigen Klammern am Ende stellen wir sicher, dass wir jedes Mal, wenn wir einen anderen Wert append, diesen tatsächlich an dieses Array anhängen, anstatt die image-Eigenschaft zu überschreiben.

Wir sind fast fertig. In unserer for-Schleife haben wir jedes der Bilder für den Benutzer angezeigt und dem formdata-Objekt hinzugefügt. Jetzt müssen wir nur noch die Bilder hochladen. Außerhalb der for-Schleife ist hier das letzte Stück unseres Puzzles:

Auch hier müssen wir sicherstellen, dass wir FormData-Unterstützung haben. Andernfalls wird die Schaltfläche "Dateien hochladen (Upload Files)!" angezeigt. Auf diese Weise wird der Benutzer die Fotos hochladen.  Wenn wir jedoch FormData-Unterstützung haben, kümmern wir uns um das Hochladen über AJAX. Wir verwenden jQuery, um alle merkwürdigen Eigenschaften von AJAX für Browser zu handhaben.

Sie sind wahrscheinlich mit der $.ajax-Methode von jQuery vertraut: Sie übergeben ein Optionsobjekt. Die Eigenschaften für url, type und success sollten offensichtlich sein. Die data-Eigenschaft ist unser formdata-Objekt.  Beachten Sie diese Eigenschaften von processData und contentType. Gemäß der Dokumentation von jQuery ist processData standardmäßig true und verarbeitet und wandelt die Daten in eine Abfragezeichenfolge um.  Das wollen wir nicht, also setzen wir dies auf false. Außerdem setzen wir contentType auf false, um sicherzustellen, dass die Daten auf den Server gelangen, wie wir es erwarten.

Und das ist es. Wenn der Benutzer die Seite jetzt lädt, wird Folgendes angezeigt:

Tutorial Image

Und nachdem sie die Bilder ausgewählt haben, sehen sie Folgendes:

Tutorial Image

Und die Bilder wurden hochgeladen:

Tutorial Image

Das ist ein Wrap!

Das Hochladen von Dateien über AJAX ist ziemlich cool, und es ist großartig, dass diese neuen Technologien dies unterstützen, ohne lange Hacks zu benötigen. Wenn Sie Fragen haben, was wir hier gemacht haben, klicken Sie auf diese Kommentare! Vielen Dank fürs Lesen!

Wenn Sie bei diesem oder einem anderen Codierungsproblem noch Hilfe benötigen, finden Sie Unterstützung in Envato Studio.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.