Share
Haben Sie sich jemals gefragt, wie Sie ein Formular erstellen können, mit dem Sie mehrere Dateien direkt in den gewünschten S3-Bucket hochladen können? Während Tools wie S3Fox und Transmit die Arbeit sicherlich gut erledigen, benötigen wir für unsere Kunden manchmal eine einfachere Schnittstelle mit einem Klick. Wir werden heute einen bauen!
Lassen Sie uns zuerst unsere Ziele herausfinden.
Wir möchten eine einfache Upload-Seite erstellen, die es unseren Kunden / Teammitgliedern ermöglicht, mehrere Dateien (Assets) mit einem einzigen Klick auf unser S3-Konto hochzuladen. Dies macht den Prozess für sie so einfach wie möglich und bietet außerdem den Vorteil, den vollständigen Zugriff auf unser S3-Konto zu beschränken.
Beachten Sie bei der Arbeit mit APIs immer, dass die Verwendung vorhandener Klassen möglicherweise viel vorteilhafter ist, als Stunden zu verschwenden und die API-Dokumentation selbst zu durchsuchen. Ihre Zeit wird besser woanders verbracht. Auf der positiven Seite hat eine getestete Wrapper-Klasse für Ihre gewünschte API außerdem den Vorteil, dass Sie viel mehr testen und debuggen können.
In diesem Sinne verwenden wir die hervorragende Amazon S3 PHP-Klasse. Laden Sie die ZIP-Datei herunter und ziehen Sie den Ordner in das Stammverzeichnis Ihres Projekts.
Beginnen wir mit dem Aufbau unseres einfachen Controllers. Erstelle eine neue index.php Datei und fügen Sie hinzu:
Accentsconagua
// Fehler während der Produktion anzeigen ini_set ('display_errors', 1); // Include der S3-Klasse if (! class_exists ('S3')) requir_once 's3 / S3.php'; Wir stellen zunächst sicher, dass alle Fehler während der Produktion auf der Seite angezeigt werden.
Als Nächstes müssen wir die Amazon S3-Klasse einschließen, die wir in Schritt 1 heruntergeladen haben. Die spezifische Datei, die wir benötigen, wird aufgerufen S3.php. Jetzt sollte es nur noch in unser Projekt aufgenommen werden, wenn die S3 Klasse existiert noch nicht. Da wir die vollständige Kontrolle über diese Dateien haben, können Sie diese Prüfung technisch entfernen. Dies ist jedoch immer noch eine bewährte Methode.
Der nächste Schritt besteht darin, unsere Amazon S3-Anmeldeinformationen zu übergeben. In diesem Lernprogramm wird davon ausgegangen, dass Sie sich bereits für ein Konto angemeldet haben und diese Schlüssel zur Verfügung haben. Da sich diese Werte während des gesamten Zyklus unserer Anwendung nicht ändern sollten, sollten sie entsprechend als deklariert werden Konstanten.
// AWS-Zugriffsinformationen if (! Defined ('awsAccessKey')) define ('awsAccessKey', 'your-access-key'); if (! defined ('awsSecretKey')) define ('awsSecretKey', 'your-secret-key'); Okay, wir benötigten die erforderliche Klassendatei und haben unsere Anmeldeinformationen angegeben. Es ist jetzt Zeit, eine neue Instanz der S3-Klasse zu erstellen. Dadurch erhalten Sie eine Vielzahl von Hilfsmethoden, wenn Sie auf S3 zugreifen.
// Instanziieren der Klasse $ S3 = new S3 (awsAccessKey, awsSecretKey);
Diese Klasse akzeptiert zunächst zwei Parameter: den Zugriffsschlüssel bzw. den geheimen Schlüssel. Oben übergeben wir die Konstanten, die wir in Schritt drei deklariert haben.
Okay, das reicht jetzt. Lasst uns vorwärts gehen und unsere Sicht - oder die Form - aufbauen. Anstatt all dieses PHP und HTML zu kombinieren, erstellen wir eine Vorlagendatei und fügen sie hinzu. Am unteren Rand von index.php, hinzufügen:
Include 'index.tmpl.php';
Erstellen Sie diese neue Datei und speichern Sie sie im Stammverzeichnis Ihres Projektverzeichnisses. Fügen wir unser anfängliches Markup und das Formular selbst hinzu.
In S3 hochladen Eine Datei hochladen
Das sollte Ihnen meistens bekannt vorkommen. Um einige Besonderheiten herauszustellen:
X-UA-kompatibel Durch das Meta-Tag wird sichergestellt, dass der Internet Explorer unabhängig von seiner aktuellen Version die neueste Rendering-Engine verwendet, anstatt auf den IE7-Modus zurückzugreifen.no-js zum html Element und überschreiben Sie es dann mit JavaScript zu js. Es ist eine einfache Lösung! Datei Eingang. Beachten Sie, dass wir das festgelegt haben enctype zu Multipart / Formulardaten. Dies ist für alle Dateiuploads erforderlich. Der Submit-Button wird später in diesem Tutorial hinzugefügt, wenn wir das Uploadify-Plugin integrieren.Aktion des Formulars auf die aktuelle Seite, aber in der Querzeichenfolge haben wir auch den Wert "uploads" übergeben. 
Was passiert also, wenn ein Benutzer eine Datei auswählt? Nun, ohne die Tatsache, dass wir das noch nicht integriert haben einreichen Wenn Sie die Taste noch nicht betätigen, werden die Dateidaten im temporären Speicher abgelegt. Wir werden den Vorgang des tatsächlichen Speicherns der Dateien in einem lokalen Ordner in einem zukünftigen Schritt durchführen. Nehmen wir an, dass die Dateien in unserem Ordner "Uploads" gespeichert wurden.
Hören wir auf einen Upload mit PHP. Kehre zu deinem zurück index.php Regler. Direkt nachdem Sie eine neue Instanz der S3-Klasse erstellt haben:
// Instanziieren der Klasse $ s3 = new S3 (awsAccessKey, awsSecretKey); // Prüfen Sie, ob ein Formular gesendet wurde. if (isset ($ _ GET ['uploads']))
Erinnern Sie sich, wie wir das einstellen Aktion Attribut des zu übergebenden Formulars ?Uploads = abgeschlossen im Querystring? Dieser Wert steht uns dann zur Verfügung über: $ _GET ['uploads']. Wenn also die Seite geladen wird und dieser Wert vorhanden ist, wissen wir, dass das Formular übermittelt wurde. Ausgezeichnet!
Als Nächstes sollten wir einige Variablen deklarieren, die angeben, wie und wo wir die übermittelten Dateien unterstützen möchten. Der folgende Code sollte in der ob Aussage oben.
$ bucketName = 'myUploadr'; $ uploadsDir = 'uploads /'; $ refused_types = array ('application / exe'); Wenn du liest "Eimer", denken "Mappe."
S3 verwendet den Begriff Eimer, es bezieht sich jedoch im Wesentlichen auf einen Ordnernamen in Ihrem Konto. Fühlen Sie sich frei, dies zu benennen, wie Sie möchten. Ich habe meinen Eimer angerufen, myUploadr.
Als Nächstes müssen wir wissen, wo die hochgeladenen Dateien gespeichert wurden. Wir verwenden diesen Pfad dann, um die Dateien in diesem Ordner nacheinander in den S3-Bucket hochzuladen. Erstellen Sie einen Ordner mit dem Namen Uploads, und platzieren Sie es in der Wurzel Ihres Projekts.
Schließlich sollten wir entweder festlegen, welche Dateitypen hochgeladen werden können, oder das Gegenteil. Diese Option hängt von den spezifischen Anforderungen Ihres Projekts ab. In diesem Fall lehnen wir alles ab, um die Dinge einfach zu halten exe Dateien, aber ändern Sie dies gerne nach Ihren Wünschen.
Notiere dass der
$ refused_typesArray macht nichts an und für sich. Es ist einfach ein Array, an das wir uns später anschließen werden.
Um herauszufinden, mit welchen Dateien wir arbeiten müssen, müssen wir das Upload-Verzeichnis scannen. PHP bietet das hilfreiche Scandir Funktion, um dies zu ermöglichen.
$ files = scandir ($ uploadsDir); array_shift ($ files); array_shift ($ files);
Schon mal gemerkt wie das scanDir Funktion gibt immer zwei Elemente zurück: '.' und '? ' Diese beziehen sich auf Ordner, und obwohl wir ein bisschen technischer sein könnten, lasst uns faul sein und diese beiden mit der array_shift Funktion. Das wird uns verlassen mit:
Array ([0] => some-file.jpg)
Nun gut, jetzt, da wir über ein Array aller Dateien verfügen, die hochgeladen werden müssen, nutzen wir die S3-Klasse! Lass uns das herausfinden. Wir müssen:
Zeit Funktion dafür. Andernfalls laufen wir Gefahr, Dateien mit denselben Namen zu überschreiben. // einen neuen Bucket erstellen $ S3-> putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); // Durchsuchen der Elemente im Ordner "uploads /" nach ($ i = 0; $ i < count($files); $i++ ) // Determine what type of file it is. (for example, "image/png") $mt = mime_content_type('uploads/' . $files[$i]); // If the file type is in our refused_types array, delete it, and continue? if ( in_array($mt, $refused_types) ) // can't accept this file type. Delete it. // You could also reverse this to only accepted allowed-types. unlink($uploadsDir . $fils[$i]); continue; //Prefix a unique sequence of characters to the file name $fileName = time() . '-' . $files[$i]; // path to file we want to move, the desired bucket, the desired file name, when it is added to the bucket, Access control list if ($S3->putObjectFile ($ uploadsDir. $ files [$ i], "$ bucketName", $ fileName, S3 :: ACL_PUBLIC_READ)) // Datei löschen unlink ($ uploadsDir. $ files [$ i]); // update filesArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName"; Okay, nehmen wir den Code Zeile für Zeile, um maximale Klarheit zu schaffen.
$ S3-> putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); Mit dieser Methode der $ S3-Klasse können wir unserem S3-Konto einen neuen Bucket hinzufügen. Es akzeptiert zwei Parameter: den Namen des Buckets und die Berechtigungen. Hier haben wir "myUploadr" übergeben und die Berechtigungen für das öffentliche Lesen aller festgelegt.
für ($ i = 0; $ i < count($files); $i++ )
Diese zum Mit dieser Anweisung können wir alle Bilder in der Uploads Mappe.
$ fileName = time (). '-'. $ files [$ i];
Diese Zeile stellt sicher, dass der Dateiname eindeutig ist und nicht mit vorhandenen Dateien im Bucket von S3 kollidiert. Das Zeit() function wird unserem Dateinamen eine eindeutige Zeichenfolge voranstellen.
if ($ S3-> putObjectFile ($ uploadsDir. $ Dateien [$ i], "$ bucketName", $ Dateiname, S3 :: ACL_PUBLIC_READ))
Diese Zeile erledigt das Hochladen der Datei in S3 dank des hilfreichen Inhalts putObjectFile Methode der S3-Klasse. Diese Methode akzeptiert vier Hauptparameter.
unlink ($ uploadsDir. $ files [$ i]);
Wenn die Datei erfolgreich hochgeladen wurde, brauchen wir sie nicht mehr lokal gespeichert. Wir können die Datei mit PHP löschen Verknüpfung aufheben Funktion und übergeben einen Pfad zu der Datei, die gelöscht werden soll.
Was ist nun, wenn wir mehrere Dateien in S3 hochladen, was wahrscheinlich ist? Wir brauchen einen Ort, an dem die Pfade zu all diesen Dateien gespeichert werden können, richtig? In diesem Sinne erstellen wir ein neues Array namens $ filesArr.
// ein Array mit Links zu allen hochgeladenen Bildern $ filesArr = array ();
Sie können dies an der Spitze Ihres platzieren ob Aussage. Bei diesem von uns erstellten Array müssen wir nur den Pfad zu jeder hochgeladenen Datei in das Array verschieben.
// update filesArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName";
Einmal die zum Anweisung wird abgeschlossen, $ fileArr enthält daher eine Liste von Pfaden zu jeder hochgeladenen Datei. Presto!
index.php Datei Unten finden Sie den vollständigen Quellcode für unseren einfachen "Controller".
putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); // Durchsuchen Sie die Elemente im Uplaod-Ordner nach ($ i = 0; $ i < count($files); $i++ ) //retrieve post variables $fileName = time() . '-' . $files[$i]; // path to file we want to move, the desired bucket, the desired file name, when it is added to the bucket, Access control list if ($s3->putObjectFile ($ uploadsDir. $ files [$ i], "$ bucketName", $ fileName, S3 :: ACL_PUBLIC_READ)) // Datei löschen unlink ($ uploadsDir. $ files [$ i]); // update filesArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName"; Include 'index.tmpl.php'; 
Wir haben alle serverseitigen Funktionen für unsere kleine Web-App geschrieben. Nun müssen wir jedoch den Front-End-Prozess des Hochladens mehrerer Dateien auf unsere Dateien abwickeln Uploads / Verzeichnis. Dazu nutzen wir das praktische Uploadify.
"Uploadify ist ein jQuery-Plugin, das ein vollständig anpassbares Hilfsprogramm zum Hochladen mehrerer Dateien in Ihre Website integriert. Es verwendet eine Mischung aus Javascript, ActionScript und jeder serverseitigen Sprache, um dynamisch eine Instanz über ein beliebiges DOM-Element auf einer Seite zu erstellen."
Der erste Schritt bei der Integration von Uploadify besteht darin, die erforderlichen Dateien herunterzuladen. Sie sind hier erhältlich. Benennen Sie den heruntergeladenen Ordner in "uploadify" um und platzieren Sie ihn im Stammverzeichnis Ihres Projektverzeichnisses.
Als Nächstes müssen wir die erforderlichen Dateien aus unserer Sicht referenzieren. Zurückkommen zu index.tmpl.php, und kurz vor dem Schluss Karosserie tag, anfügen:
Hier verweisen wir auf die neueste Version von jQuery, swfobject, das Hauptscript von Uploadify und unsere eigene scripts.js-Datei (Sie können diese Datei jetzt erstellen).
Lassen Sie uns jetzt Uploadify aktivieren.
(function () var myUploadr = uploadify: function () $ ('# file_upload'). uploadify ('uploader': 'uploadify / uploadify.swf'), 'script': 'uploadify / uploadify.php', 'cancelImg': 'uploadify / cancel.png', 'Ordner': 'uploads /', 'auto': true, 'multi': true, 'wmode': 'transparent', 'buttonText': 'Send to S3' , 'sizeLimit': 10485760, // 10 MB 'onAllComplete': function () // Alle Dateien wurden hochgeladen. location = "index.php? uploads = complete";;)));); Das Aktivieren von Uploadify ist so einfach wie das Aufrufen einer Methode. Denken Sie daran, Uploadify ist nur ein fantastisches jQuery-Plugin. Diese Methode akzeptiert viele optionale Parameter. Ich möchte Sie ermutigen, sie hier anzusehen. Für unsere besonderen Bedürfnisse benötigen wir nur eine Handvoll.
swf Datei, die die Senden-Schaltfläche behandelt uploadify.php transparent um sicherzustellen, dass es keine Probleme mit dem "Z-Index" gibt, bei denen die Schaltfläche über einem Dropdown-Menü oder einem ähnlichen Element angezeigt wird. Uploads = abgeschlossen param in der Abfragezeichenfolge. Das sollte es tun! Stellen Sie einfach sicher, dass Sie unsere anrufen uploadify Funktion am unteren Rand von scripts.js.
myUploadr.uploadify ();
Dieser Code wendet die benutzerdefinierte Schaltfläche auf Ihr Formular an und übernimmt auch die Logik des Hochladens und der Übertragung Ihrer Dateien in den erforderlichen Ordner.
An diesem Punkt haben wir den Großteil unserer Logik geschrieben. Aber es gibt noch eine letzte Aufgabe, die wir beenden müssen. Erinnern Sie sich noch daran, als wir die Logik geschrieben haben, die Uploads auf unser S3-Konto erledigte? Wir haben die Links in einer Array, namens $ filesArr.
Wenn unser Formular geladen wird, sollten wir feststellen, ob dies der Fall ist Array existiert und ist nicht leer Wenn dies der Fall ist, wurden die Dateien bereits hochgeladen. In diesem Fall müssen nur Links zu jedem hochgeladenen Asset angezeigt werden.
Zurückkommen zu index.tmpl.php, und fügen Sie unterhalb des primären Formulars Folgendes hinzu:
Links zu hochgeladenen Dateien
$ path):?>
- ">
Dieses Codebit bestimmt zuerst, ob $ filesArr existiert. Wenn dies der Fall ist, enthält es sowohl den Namen als auch den Link zu jeder hochgeladenen Datei. Um diese Verknüpfungen anzuzeigen, müssen Sie lediglich die einzelnen Elemente im Array filtern und ein Ankertag ausgeben, das eine Verknüpfung zur zugehörigen Datei herstellt.
Das sollte es tun! Jetzt, da die gesamte Funktionalität nicht mehr zur Verfügung steht, müssen Sie als Nächstes die Seite an Ihre speziellen Anforderungen anpassen. Wir könnten das abdecken, aber das würde den Rahmen dieses Tutorials entschieden sprengen. Nutzen Sie Ihre Vorstellungskraft - hier ist das, was ich geendet habe.
Vielen Dank für das Lesen und lassen Sie mich wissen, wenn Sie Fragen haben! Wenn Sie durch Teile des schriftlichen Tutorials verwirrt wurden, sollten Sie sich auch den Screencast ansehen!
