Share
Noen gang lurt på hvordan du lager et skjema som kan laste opp flere filer direkte til ønsket S3-bøtte? Mens verktøy som S3Fox og Transmit sikkert får jobben gjort ganske bra, trenger vi noen ganger et enklere, ett-klikk-grensesnitt for våre kunder. Vi skal bygge en i dag!
La oss finne ut våre mål først.
Vi ønsker å bygge en enkel opplastingsside som vil gi våre kunder / teammedlemmer muligheten til å laste opp flere filer (eiendeler) til vår S3-konto med ett enkelt klikk. Dette vil gjøre prosessen så enkelt som mulig for dem, og også med bonusen for å begrense full tilgang til vår S3-konto.
Når du jobber med APIer, må du alltid huske på at det kan være langt mer gunstig å bruke eksisterende klasser, i stedet for å kaste bort timer på timer, skure gjennom API-dokumentasjonen selv. Tiden din er bedre brukt andre steder. Dessuten, på plussiden, vil en testet wrapper klasse for ønsket API ha fordelen av langt mer testing og feilsøking.
Med det i tankene bruker vi den utmerkede Amazon S3 PHP Class. Gå videre og last ned zip-filen og dra mappen til roten av prosjektet.
La oss begynne å bygge vår enkle kontroller. Lage en ny index.php fil, og legg til:
Accentsconagua
// Vis feil under produksjonen ini_set ('display_errors', 1); // inkludere S3-klassen hvis (! class_exists ('S3')) require_once 's3 / S3.php'; Vi sørger først for at alle feil vises på siden under produksjonen.
Deretter må vi inkludere Amazon S3-klassen som vi lastet ned i trinn ett. Den spesifikke filen vi krever kalles S3.php. Nå bør det bare bli inkludert i prosjektet dersom S3 klassen eksisterer ikke allerede. Teknisk, ettersom vi har full kontroll over disse filene, kan du komme unna med å fjerne denne sjekken, men det er fortsatt en god praksis.
Det neste trinnet er å passere i våre Amazon S3 legitimasjonsbeskrivelser. Denne opplæringen antar at du allerede har registrert deg for en konto, og har de nøklene som er tilgjengelige for deg. Ettersom disse verdiene ikke bør endres gjennom hele programmets syklus, bør de på riktig måte deklareres som konstanter.
// AWS-tilgangsinfo hvis (! Definert ('awsAccessKey')) definere ('awsAccessKey', 'din tilgangs-nøkkel'); hvis (! definert ('awsSecretKey')) definere ('awsSecretKey', 'din-hemmelig-nøkkel'); Ok, vi krevde den nødvendige klassefilen, og har oppgitt våre legitimasjonsbeskrivelser. Det er nå på tide å lage en ny forekomst av S3-klassen. Dette vil da gi oss en mengde hjelpemetoder når du åpner S3.
// instantiate klassen $ S3 = ny S3 (awsAccessKey, awsSecretKey);
Denne klassen vil i utgangspunktet godta to parametre: henholdsvis tilgangstasten og hemmelig nøkkel. Over, vi går forbi konstantene som vi erklærte i trinn tre.
Ok, det gjør det for nå. La oss gå videre og bygge vårt syn - eller skjemaet. I stedet for å kombinere alt dette PHP og HTML, vil vi i stedet lage en malfil, og inkludere den. På bunnen av index.php, Legg til:
inkludere 'index.tmpl.php';
Gå videre og lag denne nye filen, og vær så snill å lagre den i roten til prosjektkatalogen din. La oss legge til vår første oppskrift og skjemaet, selv.
Last opp til S3 Last opp en fil
Dette bør alle se mest kjent ut for deg. Å peke på noen få detaljer, skjønt:
X-UA-Compatible metakode sikrer at Internet Explorer, uansett hva, bruker den nyeste renderingsmotoren, i stedet for å falle tilbake til IE7-modus.no-js til html element, og overstyr det deretter med JavaScript til js. Det er en enkel løsning! fil input. Legg merke til at vi har satt inn enctype til multipart / skjema-data. Dette kreves for alle filopplastinger. Send-knappen vil bli lagt til senere i denne opplæringen, når vi integrerer Uploadify-plugin.handling av skjemaet til den nåværende siden, men vi har også bestått verdien "opplastinger" i spørringen. 
Så, hva skjer når en bruker velger en fil? Vel, med unntak av det faktum at vi ennå ikke har integrert sende inn knappen, vil fildata lagres i midlertidig minne. Vi håndterer prosessen med å lagre filene til vår lokale mappe i et fremtidig trinn. For nå, la oss fortsette, forutsatt at filene har blitt lagret i vår "opplastinger" -mappe.
La oss lytte til en opplasting med PHP. Gå tilbake til din index.php kontrolleren. Umiddelbart etter at du opprettet en ny forekomst av S3-klassen:
// instantiate klassen $ s3 = ny S3 (awsAccessKey, awsSecretKey); // Sjekk om et skjema var sendt inn. hvis (isset ($ _ GET ['uploads'])))
Husk hvordan vi setter handling Attributt av skjemaet til å passere ?opplastninger = komplett i spørringen? Den verdien vil da være tilgjengelig for oss via: $ _GET [ 'opplastinger']. Så når siden lastes, hvis denne verdien eksisterer, vet vi at skjemaet er sendt inn. Utmerket!
Deretter bør vi erklære noen variabler, som refererer til hvordan og hvor vi vil støtte de innleverte filene. Følgende kode skal plasseres innenfor hvis erklæring ovenfor.
$ bucketName = 'myUploadr'; $ uploadsDir = 'opplastinger /'; $ refused_types = array ('application / exe'); Når du leser "bøtte", synes at "mappe."
S3 bruker begrepet bøtte, men det refererer i hovedsak til et mappenavn i kontoen din. Ta gjerne navnet på det du ønsker. Jeg har ringt min bøtte, myUploadr.
Deretter må vi vite hvor de opplastede filene ble lagret. Vi vil da bruke den banen til å oppsøke filene i den mappen i S3-bucket. Opprett en mappe som heter opplastinger, og plasser den i roten til prosjektet ditt.
Til slutt bør vi angi hvilke filtyper som kan lastes opp, eller motsatt. Dette alternativet vil være avhengig av prosjektets spesifikke behov. I dette tilfellet, for å holde ting enkelt, vil vi nekte alt exe filer, men gjerne endre det slik du ønsker.
Legg merke til at
$ refused_typesarray gjør ikke noe i seg selv. Det er rett og slett en matrise som vi vil koble til senere.
For å finne ut hvilke filer vi må jobbe med, må vi skanne laste opp katalogen. PHP tilbyr det hjelpsomme scandir funksjon for å tillate dette.
$ files = scandir ($ uploadsDir); array_shift ($ filer); array_shift ($ filer);
Noe merke hvordan scanDir funksjonen returnerer alltid to elementer: '.' og '? '? Disse refererer til mapper, og selv om vi kan være litt mer tekniske om det, la oss være lat og skjær disse to av listen vår ved å bruke array_shift funksjon. Det vil etterlate oss med:
Array ([0] => some-file.jpg)
Ok, nå at vi har en rekke av alle filene som må lastes opp, la oss dra nytte av S3-klassen! La oss finne ut dette. Vi må:
tid fungere for dette. Ellers risikerer vi å overskrive filer med samme navn. // lage en ny bøtte $ S3-> putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); // filtrere gjennom elementer i "opplastinger /" -mappen for ($ 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)) // slett filen unlink ($ uploadsDir. $ files [$ i]); // oppdatere filerArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName"; Ok, la oss ta den kodelinjen for linje for maksimal klarhet.
$ S3-> putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); Denne metoden i $ S3-klassen tillater oss å legge til en ny bøtte til vår S3-konto. Den aksepterer to parametre: navnet på bøtte og tillatelsene. Her har vi passert i "myUploadr", og har satt tillatelsene til offentlig les alle.
for ($ i = 0; $ i < count($files); $i++ )
Dette til uttalelse vil tillate oss å sykle gjennom alle bildene i opplastinger mappe.
$ fileName = time (). '-'. $ Filer [$ i];
Denne linjen vil sikre at filnavnet er unikt, og ikke kolliderer med eksisterende filer i bøtte på S3. De tid() funksjonen vil prefikse en unik streng av tegn til vårt filnavn.
hvis $ S3-> putObjectFile ($ uploadsDir. $ files [$ i], "$ bucketName", $ fileName, S3 :: ACL_PUBLIC_READ))
Denne linjen håndterer prosessen med å laste opp filen til S3, takket være det nyttige putObjectFile metode for S3-klassen. Denne metoden vil godta fire primære parametere.
unlink ($ uploadsDir. $ files [$ i]);
Hvis filen ble lastet opp, trenger vi ikke lenger den lagret lokalt. Vi kan slette filen ved å bruke PHP frakoble funksjon, og passerer i en bane til filen som skal slettes.
Nå, hva om vi laster opp flere filer til S3, som er sannsynlig? Vi trenger et sted å lagre stiene til alle disse filene, ikke sant? Med det for øye, la oss lage et nytt utvalg, kalt $ filesArr.
// en matrise som inneholder lenker til alle de opplastede bildene $ filesArr = array ();
Du kan plassere dette på toppen av din hvis uttalelse. Med det samlingen vi opprettet, trenger vi bare å skyve banen til hver opplastede fil til den.
// oppdatere filerArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName";
Først når til uttalelsen fullføres, $ fileArr vil følgelig inneholde en liste over stier til hver opplastet fil. Presto!
index.php Fil Se nedenfor for den fullførte kildekoden for vår enkle "kontroller".
putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); // filtrer gjennom elementer i oppladet mappe for ($ 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)) // slett filen unlink ($ uploadsDir. $ files [$ i]); // oppdatere filerArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName"; inkluderer 'index.tmpl.php'; 
Vi har skrevet alle server-side funksjonalitet for vår lille web-app. Men nå må vi håndtere front-end-prosessen med å laste opp flere filer til vår uploads / katalogen. For å gjøre det, vil vi dra nytte av den praktiske Uploadify.
"Uploadify er et jQuery-plugin som integrerer et fullt tilpassbart filoppdateringsverktøy på nettstedet ditt. Det bruker en blanding av Javascript, ActionScript og et hvilket som helst server-side språk for å dynamisk opprette en forekomst over et DOM-element på en side."
Det første trinnet, når du integrerer Uploadify, er å laste ned de nødvendige filene. De kan fås her. Gi nytt navn til den nedlastede mappen for å "laste opp," og legg den inn i roten til prosjektkatalogen.
Deretter må vi referere til de nødvendige filene fra vår visning. Tilbake til index.tmpl.php, og like før avslutningen kropp tag, legg til:
Her refererer vi til den nyeste versjonen av jQuery, swfobject, Uploadifys kjerneskript og vår egen scripts.js-fil (du kan opprette den filen nå).
La oss nå aktivere Uploadify.
(funksjon () var myUploadr = uploadify: function () $ ('# file_upload'). uploadify ('uploader': 'uploadify / uploadify.swf', 'script': 'uploadify / uploadify.php' 'cancellImg': 'uploadify / cancel.png', 'folder': 'opplastinger /', 'auto': true 'multi': true 'wmode': 'transparent', 'buttonText': 'Send til S3' , 'sizeLimit': 10485760, // 10 megs 'onAllComplete': funksjon () // alle filer ferdig opplasting sted = "index.php? uploads = complete";);) Aktivering Uploadify er like enkelt som å kalle en metode. Husk, Uploadify er bare et kjempefint jQuery-plugin. Denne metoden godtar mange valgfrie parametere. Jeg oppfordrer deg til å se over dem her. For våre spesielle behov krever vi bare en håndfull.
swf fil som håndterer send-knappen uploadify.php gjennomsiktig for å sikre at det ikke er noen "z-index" -problemer, hvor knappen vises over en rullegardinmeny eller noe lignende. opplastninger = komplett param i spørringsstrengen. Det burde gjøre det! Bare vær sikker på at du ringer vår uploadify Funksjon på bunnen av scripts.js.
myUploadr.uploadify ();
Denne koden vil bruke den egendefinerte knappen til skjemaet ditt, og vil også håndtere logikken for opplasting og overføring av filene til den nødvendige mappen.
På dette tidspunktet har vi skrevet hoveddelen av logikken vår. Men det er en siste oppgave som vi må fullføre. Husk da vi skrev logikken som håndterte opplastinger til vår S3-konto? Vi lagret koblingene i en matrise, kalt $ filesArr.
Når vårt skjema laster, bør vi avgjøre om dette matrise eksisterer og er ikke tom. Hvis dette er tilfelle, har filene allerede blitt lastet opp, i så fall trenger vi bare å vise koblinger til hvert opplastet aktiv.
Tilbake til index.tmpl.php, og, rett under hovedformen, legg til følgende:
Lenker til opplastede filer
$ bane):?>
- ">
Denne biten av kode bestemmer først om $ filesArr eksisterer. Hvis den gjør det, inneholder den både navnet og lenken til hver opplastede fil. For å vise disse koblingene, er prosessen så enkel som å filtrere gjennom hvert element i matrisen, og ekko ut en ankermerke som kobler til den tilknyttede filen.
Det burde gjøre det! Nå som all funksjonalitet er ute av veien, er ditt neste skritt å utforme siden til dine spesifikke behov. Vi kunne dekke det, men det er bestemt utenfor omfanget av denne opplæringen. Bruk fantasien din - her er hva jeg endte med.
Takk for at du leser, og gi meg beskjed hvis du har noen spørsmål! Hvis deler av den skriftlige opplæringen forvirret deg, pass på at du også ser på screencast!
