Share
Någonsin undrat hur man skapar en form som kan ladda upp flera filer direkt till din önskade S3-hink? Medan verktyg som S3Fox och Transmit verkligen får jobbet gjort ganska bra, behöver vi ibland ett enklare, ett-klickgränssnitt för våra kunder. Vi bygger en idag!
Låt oss förstå våra mål först.
Vi vill bygga en enkel uppladdningssida som ger våra kunder / gruppmedlemmar möjlighet att ladda upp flera filer (tillgångar) till vårt S3-konto med ett enda klick. Detta kommer att göra processen så enkel som möjligt för dem, och också med bonusen för att begränsa fullständig åtkomst till vårt S3-konto.
När du arbetar med API: er måste du alltid komma ihåg att det kan vara mycket mer fördelaktigt att använda befintliga klasser, i stället för att slösa bort timmar i timmar genom att skura igenom API-dokumentationen själv. Din tid är bättre spenderad någon annanstans. Dessutom kommer en testad wrapparklass för det önskade API-en till fördel för mycket mer testning och felsökning.
Med det i åtanke använder vi den utmärkta Amazon S3 PHP-klassen. Fortsätt och ladda ner zip-filen och dra mappen till roten till ditt projekt.
Låt oss börja bygga vår enkla kontroller. Skapa en ny index.php fil och lägg till:
Accentsconagua
// Visningsfel under produktionen ini_set ('display_errors', 1); // inkludera S3-klassen om (! class_exists ('S3')) require_once 's3 / S3.php'; Vi försäkrar först att alla fel visas på sidan under produktionen.
Därefter måste vi inkludera Amazon S3-klassen som vi hämtade i steg ett. Den specifika filen som vi behöver kallas S3.php. Nu ska det bara ingå i vårt projekt om S3 klass existerar inte redan. Tekniskt, eftersom vi har fullständig kontroll över dessa filer kan du komma undan med att ta bort den här kontrollen, men det är fortfarande en bra metod.
Nästa steg är att passera i våra Amazon S3-referenser. Denna handledning förutsätter att du redan har registrerat dig för ett konto och har de nycklarna tillgängliga för dig. Eftersom dessa värden inte bör förändras genom hela vår applikations cykel, bör de på lämpligt sätt deklareras som konstanter.
// AWS-åtkomstinfo om (! Definierad ('awsAccessKey')) definiera ('awsAccessKey', 'din access-key'); om (! definierat ('awsSecretKey')) definiera ('awsSecretKey', 'din hemliga nyckel'); Okej, vi krävde den nödvändiga klassfilen och har förklarat våra uppgifter. Det är dags att skapa en ny instans av S3-klassen. Detta kommer då att ge oss en uppsjö av hjälpar metoder när du kommer åt S3.
// instansera klassen $ S3 = ny S3 (awsAccessKey, awsSecretKey);
Denna klass kommer initialt att acceptera två parametrar: respektive åtkomstnyckel och hemlig nyckel. Ovan passerar vi i de konstanter som vi deklarerade i steg tre.
Okej, det gör det för nu. Låt oss gå vidare och bygga upp vår uppfattning - eller formuläret. I stället för att kombinera allt detta PHP och HTML, skapar vi istället en mallfil och innehåller den. På botten av index.php, Lägg till:
inkludera 'index.tmpl.php';
Fortsätt och skapa den här nya filen, och gärna lagra den i rutan till projektkatalogen. Låt oss lägga till vår första markering och formuläret själv.
Ladda upp till S3 Ladda upp en fil
Detta borde alla se mest kända för dig. Att påpeka några specifika men:
X-UA-kompatibel metakod ser till att Internet Explorer, oavsett vad som använder sin senaste återgivningsmotor, snarare än att gå tillbaka till IE7-läget.no-js till html element, och överrätta sedan det med JavaScript till js. Det är en lätt lösning! fil inmatning. Observera att vi har ställt in enctype till multipart / form-data. Detta krävs för alla filuppladdningar. Skicka-knappen läggs till senare i den här handledningen när vi integrerar pluginet Uploadify.verkan av formuläret till den aktuella sidan, men vi har också passerat värdet "uppladdningar" i frågesträngen. 
Så, vad händer när en användare väljer en fil? Tja, med undantag för det faktum att vi ännu inte har integrerat lämna knappen ändå lagras fildata i tillfälligt minne. Vi hanterar processen att faktiskt spara filerna till vår lokala mapp i ett framtida steg. För nu, låt oss fortsätta, förutsatt att filerna har sparats i vår "uploads" -mapp.
Låt oss lyssna på en uppladdning med PHP. Återgå till din index.php kontrollant. Omedelbart efter att du skapat en ny instans av S3-klassen:
// instansera klassen $ s3 = ny S3 (awsAccessKey, awsSecretKey); // kontrollera om en blankett skickades in om (isset ($ _ GET ['uploads'])))
Kom ihåg hur vi ställer in verkan attributet av formuläret för att passera ?inlagda = fullständig i frågesträngen? Det värdet kommer då att vara tillgängligt för oss via: $ _GET [ 'uppladdningar']. Så, när sidan laddas, om det värdet existerar, vet vi att formuläret har skickats in. Excellent!
Därefter bör vi förklara några variabler, vilka refererar till hur och var vi vill stödja de inlämnade filerna. Följande kod ska placeras inom om uttalande ovan.
$ bucketName = 'myUploadr'; $ uploadsDir = 'uploads /'; $ refused_types = array ('application / exe'); När du läser "hink", tror "mapp."
S3 använder termen hink, men det refererar i huvudsak till ett mappnamn i ditt konto. Känn fritt att namnge det här du önskar. Jag har ringt min skopa, myUploadr.
Därefter måste vi veta var de uppladdade filerna lagrades. Vi använder sedan den sökvägen för att sekventiellt ladda upp filerna i den mappen till S3-hinken. Skapa en mapp som heter uppladdningar, och placera den i roten till ditt projekt.
Slutligen bör vi ange vilka filtyper som kan laddas upp, eller motsatsen. Det här alternativet kommer att vara beroende av projektets specifika behov. I det här fallet, för att hålla sakerna enkla, kommer vi att förneka allt exe filer, men gärna ändra det du önskar.
Observera att
$ refused_typesarray gör ingenting i sig själv. Det är helt enkelt en matris som vi ska koppla in senare.
För att bestämma vilka filer vi måste arbeta med måste vi skanna uppladdningsmappen. PHP erbjuder det hjälpsamma scandir funktion för att tillåta detta.
$ files = scandir ($ uploadsDir); array_shift ($ filer); array_shift ($ filer);
Någonsin märker hur scanDir funktionen returnerar alltid två poster: '.' och "? '? Dessa hänvisar till mappar, och även om vi skulle kunna vara lite mer tekniska om det, låt oss vara lat och skära dessa två från vår lista med hjälp av array_shift fungera. Det lämnar oss med:
Array ([0] => some-file.jpg)
Okej, nu när vi har en uppsättning av alla filer som behöver laddas upp, låt oss utnyttja S3-klassen! Låt oss räkna ut det här. Vi måste:
tid funktion för detta. Annars riskerar vi att skriva över filer med samma namn. // skapa en ny hink $ S3-> putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); // filtrera genom objekt i mappen "uppladdningar /" för ($ 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)) // ta bort fillänk ($ uploadsDir. $ files [$ i]); // uppdatera filerArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName"; Okej, låt oss ta den kodlinjen för rad, för maximal klarhet.
$ S3-> putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); Med denna metod i $ S3-klassen kan vi lägga till en ny hink på vårt S3-konto. Den accepterar två parametrar: namnet på skopan och behörigheterna. Här har vi passerat i "myUploadr" och har satt behörigheterna till allmänheten läsa alla.
för ($ i = 0; $ i < count($files); $i++ )
Detta för uttalandet tillåter oss att cykla igenom alla bilder i uppladdningar mapp.
$ fileName = time (). '-'. $ Filer [$ i];
Den här raden kommer att se till att filnamnet är unikt och inte kolliderar med befintliga filer i hinken på S3. De tid() funktionen prefixar en unik sträng av tecken till vårt filnamn.
om $ S3-> putObjectFile ($ uploadsDir. $ files [$ i], "$ bucketName", $ fileName, S3 :: ACL_PUBLIC_READ))
Denna rad hanterar processen för att ladda upp filen till S3, tack vare det hjälpsamma putObjectFile metod för S3-klassen. Denna metod kommer att acceptera fyra primära parametrar.
koppla bort ($ uploadsDir. $ files [$ i]);
Om filen laddades upp lyckades vi inte längre spara den lokalt. Vi kan ta bort filen med hjälp av PHP bort länken funktion och passerar i en sökväg till filen som ska raderas.
Nu, vad händer om vi laddar upp flera filer till S3, vilket är troligt? Vi behöver en plats för att lagra banorna till alla dessa filer, eller hur? Med det i åtanke, låt oss skapa en ny grupp, kallad $ filesArr.
// en array som innehåller länkar till alla de uppladdade bilderna $ filesArr = array ();
Du kan placera detta på toppen av din om påstående. Med den matrisen vi skapade behöver vi bara driva sökvägen till varje uppladdad fil till den.
// uppdatera filerArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName";
När för uttalandet avslutas, $ fileArr kommer följaktligen att innehålla en lista över sökvägar till varje uppladdad fil. Presto!
index.php Fil Se nedan för den färdiga källkoden för vår enkla "controller".
putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); // filtrera genom objekt i uppladdningsmappen för ($ 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)) // ta bort fillänk ($ uploadsDir. $ files [$ i]); // uppdatera filerArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName"; inkluderar 'index.tmpl.php'; 
Vi har skrivit all serverfunktion för vår lilla webbapp. Men nu måste vi hantera front-end-processen för att ladda upp flera filer till vår uppladdningar / katalogen. För att göra det kommer vi att dra nytta av den praktiska Uploadify.
"Uploadify är ett jQuery-plugin som integrerar ett fullständigt anpassningsbart flera filuppladdningsverktyg på din webbplats. Den använder en blandning av Javascript, ActionScript och vilket språk som helst på serverns sida för att dynamiskt skapa en instans över något DOM-element på en sida."
Det första steget, när du integrerar Uploadify, är att hämta de nödvändiga filerna. De kan erhållas här. Byt namn på den nedladdade mappen för att "ladda upp", och placera den i rutan till projektkatalogen.
Därefter måste vi referera de nödvändiga filerna ur vår åsikt. Återvänd till index.tmpl.php, och precis före stängningen kropp tagg, lägg till:
Här hänvisar vi till den senaste versionen av jQuery, swfobject, Uploadifys kärnskript och vår egen scripts.js-fil (du kan skapa den filen nu).
Låt oss nu aktivera Uploadify.
(funktion () var myUploadr = uploadify: function () $ ('# file_upload'). uploadify ('uppladdare': 'uploadify / uploadify.swf', 'script': 'uploadify / uploadify.php' 'cancelImg': 'uploadify / cancel.png', 'folder': 'uppladdningar /', 'auto': true, 'multi': true 'wmode': 'transparent', 'buttonText': 'Skicka till S3' , 'sizeLimit': 10485760, // 10 megs 'onAllComplete': funktion () // alla filer slutade ladda upp plats = "index.php? uploads = complete";);) Aktivera Uploadify är lika enkelt som att anropa en metod. Kom ihåg, Uploadify är bara ett jQuery-plugin. Denna metod accepterar många valfria parametrar. Jag uppmuntrar dig att se över dem här. För våra speciella behov behöver vi bara en handfull.
sWF fil som hanterar inlämningsknappen uploadify.php transparent för att säkerställa att det inte finns några "z-index" -problem, där knappen visas över en rullgardinsmeny eller något liknande. inlagda = fullständig param i frågesträngen. Det borde göra det! Se bara till att du ringer vårt uploadify funktion längst ner på scripts.js.
myUploadr.uploadify ();
Den här koden kommer att applicera den anpassade knappen till din blankett och hantera logiken för att ladda upp och överföra dina filer till den nödvändiga mappen.
Vid denna tidpunkt har vi skrivit huvuddelen av vår logik. Men det finns en sista uppgift som vi behöver slutföra. Kom ihåg när vi skrev logiken som hanterade uppladdningar till vårt S3-konto? Vi lagrade länkarna i en array, kallad $ filesArr.
När vår form laddas, bör vi avgöra om det här array existerar och är inte tomt. Om så är fallet har filerna redan laddats upp, i så fall behöver vi bara visa länkar till varje uppladdad tillgång.
Återvänd till index.tmpl.php, och, precis under den primära formen, lägg till följande:
Länkar till uppladdade filer
$ bana):?>
- ">
Denna bit av kod bestämmer först om $ filesArr existerar. Om det gör det innehåller det både namnet och länken till varje uppladdad fil. För att visa dessa länkar är processen så enkel som att filtrera genom varje objekt i matrisen och echoing anchor tag, som länkar till den associerade filen.
Det borde göra det! Nu när all funktionalitet är okej, är ditt nästa steg att utforma sidan till dina specifika behov. Vi kan täcka det, men det är definitivt utanför ramen för denna handledning. Använd din fantasi - här är det jag slutade med.
Tack för att du läste och låt mig veta om du har några frågor! Om delar av den skriftliga handledningen förvirrade dig, se till att du också tittar på skärmen!
