Share
Ich scheine nicht das Ende des Spaßes zu erreichen, den Sie mit aufkommenden Webtechnologien machen können. Heute zeige ich Ihnen, wie Sie etwas tun können, was 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 tippen iframe, Das wird dir sehr gefallen. Komm mit mir nach dem Sprung!
Wenn Sie nach einer schnellen Lösung suchen, finden Sie bei Envato Market eine großartige Sammlung von Datei-Upload-Skripts und -Anwendungen
Diese HTML5-Datei 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?
Dies funktioniert nicht in jedem Browser. Mit einigen progressiven Verbesserungen (oder was auch immer das aktuelle Schlagwort ist), haben wir eine Upload-Seite, die direkt in den IE6 funktioniert (allerdings ohne die AJAXy-Bits)..
Unser AJAX-Upload funktioniert solange
Formulardatenist verfügbar; Andernfalls erhält der Benutzer einen normalen Upload.
Unser Projekt besteht aus drei Hauptkomponenten.
Accentsconagua
mehrere Attribut für die Datei Eingang Element.FileReader Objekt aus der neuen Datei-API.Formulardaten Objekt von XMLHttpRequest2.Wir nehmen das mehrere Attribut, mit dem der Benutzer mehrere Dateien für den Upload auswählen kann (das Hochladen mehrerer Dateien funktioniert auch dann normal, wenn Formulardaten ist nicht verfügbar). Wie du sehen wirst, FileReader erlaubt es uns, den Benutzern Miniaturansichten der hochzuladenden Dateien anzuzeigen (wir erwarten Bilder).
Keine der drei Funktionen 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 verstehe).. FileReader funktioniert in der neuesten Version von Safari (5.1) nicht, daher werden die Miniaturansichten nicht angezeigt. Sie erhalten jedoch den AJAX-Upload und die Bestätigungsnachricht. Schließlich hat Opera 10.50 FileReader Unterstützung aber nicht Formulardaten Unterstützung, so erhalten sie Thumbnails, aber normale Uploads.
Lassen Sie uns die Codierung machen!
Beginnen wir mit einigen grundlegenden Markierungen und Stylings. Natürlich ist dies nicht der Hauptteil dieses Tutorials. Ich werde Sie nicht wie einen Neuling behandeln.
HTML5-Datei-API Laden Sie Ihre Bilder hoch
Ziemlich einfach, wie? Wir haben ein Formular, in das geschrieben wird upload.php, das werden wir in einem zweiten und einem einzigen Eingabeelement des Typs betrachten Datei. Beachten Sie, dass es das Boolean hat mehrere Attribut, mit dem der Benutzer mehrere Dateien gleichzeitig auswählen kann.
Das ist wirklich alles, was man hier sehen kann. Lass uns weitermachen.
body font: 14px / 1,5 helvetica-neue, helvetica, arial, san serif; Polsterung: 10px; h1 margin-top: 0; #main width: 300px; Marge: auto; Hintergrund: #ececec; Polsterung: 20px; Rahmen: 1px fest #ccc; # image-list list-style: none; Marge: 0; Polsterung: 0; # image-list li background: #fff; Rahmen: 1px fest #ccc; Text ausrichten: Mitte; Polsterung: 20px; Rand unten: 19px; # image-list li img width: 258px; vertikal ausrichten: Mitte; Grenze: 1px fest # 474747;
Absolut keine Schocker hier.
Wir müssen auch in der Lage sein, die Datei-Uploads am Backend zu handhaben.
$ error) if ($ error == UPLOAD_ERR_OK) $ name = $ _FILES ["images"] ["name"] [$ key]; move_uploaded_file ($ _FILES ["images"] ["tmp_name"] [$ key], "uploads /". $ _FILES ['images'] ['name'] [$ key]); Echo "Bilder wurden erfolgreich hochgeladen
";
Bedenken Sie, dass dies die ersten PHP-Zeilen waren, die ich in einem Jahr geschrieben hatte (ich bin ein Ruby-Typ). Sie sollten wahrscheinlich etwas mehr für die Sicherheit tun; Wir stellen jedoch lediglich sicher, dass keine Upload-Fehler vorliegen. Wenn dies der Fall ist, verwenden wir das eingebaute move_uploaded_file um es zu verschieben Uploads Mappe. Vergessen Sie nicht, sicherzustellen, dass der Ordner beschreibbar ist.
Wir sollten also jetzt ein funktionierendes Upload-Formular haben. Sie wählen ein Bild (mehrere, wenn Sie möchten und Ihr Browser lässt Sie), klicken Sie auf ?Daten hochladen!? und Sie erhalten die Nachricht ?Bilder wurden erfolgreich hochgeladen.?
So sieht unser Mini-Projekt bisher aus:
Aber komm schon, es ist 2011: Wir wollen mehr als das. Sie werden feststellen, dass wir jQuery und eine upload.js Datei. Lass uns das jetzt aufbrechen.
Vergeuden wir keine Zeit: Hier geht es los!
(function () var input = document.getElementById ("images"), formdata = false; if (window.FormData) formdata = neue FormData (); document.getElementById ("btn"). style.display = "keine "; (); Hier beginnen wir mit. Wir erstellen zwei Variablen: Eingang ist unser Dateieingabeelement; Formulardaten wird verwendet, um die Bilder an den Server zu senden, wenn der Browser dies unterstützt. Wir initialisieren es mit falsch und prüfen Sie dann, ob der Browser dies unterstützt Formulardaten; Wenn ja, erstellen wir ein neues Formulardaten Objekt. Wenn wir die Bilder mit AJAX einreichen können, brauchen wir keine Bilder hochladen! Taste, damit wir es verstecken können. Warum brauchen wir es nicht? Nun, wir werden die Bilder automatisch magisch hochladen, nachdem 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:
Funktion showUploadedItem (source) var list = document.getElementById ("image-list"), li = document.createElement ("li"), img = document.createElement ("img"); img.src = Quelle; li.appendChild (img); list.appendChild (li); 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, fügen das Bild in das Listenelement und das Listenelement in die Liste ein. Voila!
Als Nächstes müssen wir die Bilder tatsächlich aufnehmen, anzeigen und hochladen. Wie gesagt, machen wir das, wenn die bei Änderung Ereignis wird auf das Eingabeelement ausgelöst.
if (input.addEventListener) input.addEventListener ("change", Funktion (evt) var i = 0, len = this.files.length, img, Leser, Datei; document.getElementById ("response"). innerHTML = "Hochladen?" Für (; i < len; i++ ) file = this.files[i]; if (!!file.type.match(/image.*/)) , false); Wir müssen uns nicht um das proprietäre Ereignismodell von IE kümmern, da IE9 + die standardmäßige addEventListener-Funktion unterstützt.
Es gibt noch mehr, aber fangen wir damit an. Erstens müssen wir uns nicht um das proprietäre Ereignismodell von IE kümmern, da IE9 + den Standard unterstützt addEventListener Funktion (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 zugegriffen werden diese Dateien. Im Moment beschäftigen wir uns nur mit dem Länge Eigenschaft, so dass wir die Dateien durchlaufen können?
? genau das tun wir als nächstes. In unserer Schleife setzen wir die aktuelle Datei auf Datei für einen einfachen Zugang. Als Nächstes bestätigen wir, dass es sich bei der Datei um ein Bild handelt. Wir können dies tun, indem wir das vergleichen Art Eigenschaft mit einem regulären Ausdruck. Wir suchen einen Typ, der mit? Image? Beginnt. und es folgt etwas. (Der Doppelknopf vorne konvertiert das Ergebnis einfach in einen booleschen Wert.)
Was machen wir also, wenn wir ein Bild in unseren Händen haben??
if (window.FileReader) reader = new FileReader (); reader.onloadend = function (e) showUploadedItem (e.target.result); ; reader.readAsDataURL (Datei); if (formdata) formdata.append ("images []", Datei); Wir prüfen, ob der Browser das Erstellen unterstützt FileReader Objekte. Wenn dies der Fall ist, erstellen wir einen.
So verwenden wir a FileReader Objekt: Wir werden unser bestanden Datei Einwände gegen die reader.readAsDataURL Methode. Dadurch wird eine Daten-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.
Vor diesem Hintergrund müssen wir eine Funktion im registrieren reader.onloadend Veranstaltung. Diese Funktion nimmt ein Ereignisobjekt, durch das wir die Daten-URL erhalten: Es ist um e.Target.Ergebnis (Ja, e.target ist der Leser Objekt, aber ich hatte Probleme bei der Verwendung Leser anstelle von e.target innerhalb dieser Funktion). Wir werden nur diese Daten-URL an unsere weiterleiten showUploadedItem Funktion (die wir oben geschrieben haben).
Als nächstes prüfen wir das Formulardaten Objekt. Denken Sie daran, wenn der Browser dies unterstützt Formulardaten, Formulardaten wird ein ... sein Formulardaten Objekt; sonst wird es sein falsch. Also, wenn wir eine haben Formulardaten Objekt, wir werden das anrufen anhängen Methode. Der Zweck von a Formulardaten Das Objekt soll Werte enthalten, die Sie über ein Formular senden. also die anhängen Die Methode nimmt einfach einen Schlüssel und einen Wert. In unserem Fall ist unser Schlüssel Bilder []; indem wir die eckigen Klammern am Ende hinzufügen, stellen wir jedes Mal sicher, dass wir dies tun anhängen einen anderen Wert, wir hängen ihn tatsächlich an dieses Array an, anstatt das zu überschreiben Bild Eigentum.
Wir sind fast fertig. In unserer for-Schleife haben wir jedes der Bilder für den Benutzer angezeigt und dem hinzugefügt Formulardaten Objekt. Jetzt müssen wir nur noch die Bilder hochladen. Außerhalb von zum Schleife, hier ist das letzte Stück unseres Puzzles:
if (formdata) $ .ajax (url: "upload.php", Typ: "POST"), Daten: formdata, processData: false, contentType: false, success: function (res) document.getElementById ("response") ) .innerHTML = res;); Wieder müssen wir sicherstellen, dass wir es haben Formulardaten Unterstützung; Wenn wir dies nicht tun, können Sie die Dateien hochladen. Die Schaltfläche wird sichtbar sein, und so wird der Benutzer die Fotos hochladen. Wenn wir aber haben Formulardaten Support, wir kümmern uns um das Hochladen via AJAX. Wir verwenden jQuery, um alle merkwürdigen Eigenschaften von AJAX in Browsern zu behandeln.
Sie sind wahrscheinlich mit jQuery vertraut $ .ajax Methode: Sie übergeben ein Optionsobjekt. Das url, Art, und Erfolg Eigenschaften sollten offensichtlich sein. Das Daten Eigentum ist unser Formulardaten Objekt. Beachten Sie diese Prozessdaten und Inhaltstyp Eigenschaften. Laut jQuery-Dokumentation, Prozessdaten ist wahr standardmäßig und verarbeitet und wandelt die Daten in eine Abfragezeichenfolge um. Das wollen wir nicht, also setzen wir das auf falsch. Wir setzen auch ein Inhaltstyp zu falsch 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:
Und nachdem sie die Bilder ausgewählt haben, sehen sie Folgendes:
Und die Bilder wurden hochgeladen:
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 zu dem 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.
Wir haben ein umfassendes Handbuch erstellt, um Sie beim Erlernen von JavaScript zu unterstützen, unabhängig davon, ob Sie gerade erst als Webentwickler anfangen oder sich mit fortgeschrittenen Themen beschäftigen möchten
