Share
V-ați întrebat vreodată cum să creați un formular care să poată încărca mai multe fișiere direct în galetul dvs. S3 dorit? În timp ce unelte precum S3Fox și Transmit cu siguranță fac treaba destul de bine, uneori avem nevoie de o interfață mai simplă, cu un singur clic pentru clienții noștri. Vom construi unul astăzi!
Să ne dăm mai întâi obiectivele.
Vrem să construim o pagină de încărcare simplă, care va oferi clienților / membrilor echipei capacitatea de a încărca mai multe fișiere (active) în contul nostru S3 cu un singur clic. Acest lucru va face procesul cât mai simplu posibil pentru ei și, de asemenea, vine cu bonusul de a restricționa accesul complet la contul nostru S3.
Când lucrați cu API, rețineți întotdeauna că ar fi mult mai avantajos să folosiți clasele existente, decât să pierdeți ore în timp ce revoluționați personal documentația API. Timpul tău este mai bine petrecut în altă parte. În plus, în plus, o clasă de wrapper testată pentru API-ul dorit va beneficia de mult mai multă teste și depanare.
Cu acest lucru în minte, vom folosi excelent Amazon S3 PHP Class. Continuați și descărcați fișierul zip și trageți directorul în rădăcina proiectului.
Să începem să construim controlerul nostru simplu. Creaza un nou index.php fișier și adăugați:
Accentsconagua
// Afișarea erorilor în timpul producției ini_set ('display_errors', 1); // include clasa S3 dacă (! class_exists ('S3')) require_once 's3 / S3.php'; Ne asigurăm mai întâi că toate erorile sunt afișate pe pagină în timpul producției.
Apoi, trebuie să includeți clasa Amazon S3 pe care am descărcat-o în primul pas. Se numește fișierul specific pe care îl solicităm S3.php. Acum ar trebui să fie incluse în proiectul nostru numai dacă S3 clasa nu există deja. Din punct de vedere tehnic, pe măsură ce avem control complet asupra acestor fișiere, puteți să eliminați acest cec, dar este încă o bună practică.
Următorul pas este trecerea în acreditările noastre Amazon S3. Acest tutorial presupune că ați înregistrat deja un cont și că aveți aceste chei disponibile pentru dvs. Deoarece aceste valori nu ar trebui să se schimbe pe parcursul ciclului aplicației noastre, ar trebui să fie declarate în mod corespunzător ca fiind constante.
// AWS info access dacă (! Defined ('awsAccessKey')) definește ('awsAccessKey', 'cheia dvs. de acces'); dacă (! defined ('awsSecretKey')) definește ('awsSecretKey', 'secret-key'); Bine, am cerut fișierul de clasă necesar și ne-au declarat acreditările. Acum este momentul să creați o nouă instanță a clasei S3. Acest lucru ne va oferi apoi o mulțime de metode de ajutor atunci când accesăm S3.
// instanțiați clasa $ S3 = noul S3 (awsAccessKey, awsSecretKey);
Această clasă va accepta inițial doi parametri: cheia de acces și respectiv cheia secretă. Mai sus, trecem prin constantele pe care le-am declarat la pasul trei.
Bine, asta va face pentru moment. Să mergem mai departe și să construim punctul nostru de vedere - sau forma. Mai degrabă decât combinând toate aceste PHP și HTML, vom crea un fișier șablon și îl vom include. La fundul index.php, adăuga:
includ "index.tmpl.php";
Continuați și creați acest fișier nou și nu ezitați să îl stocați în rădăcina directorului dvs. de proiect. Să adăugăm marcajul inițial și formularul în sine.
Încărcați în S3 Incarca un fisier
Toate acestea ar trebui să vă pară mai degrabă cunoscute. Pentru a sublinia însă câteva particularități:
X-UA-Compatibil meta tag-ul asigură că Internet Explorer, indiferent de ce, folosește cel mai recent motor de randare, mai degrabă decât să se întoarcă în modul IE7.no-js la html element, apoi suprascrieți-l cu ajutorul JavaScript-ului js. Este o soluție ușoară! fişier intrare. Rețineți că am setat enctype la multipart / form-data. Acest lucru este necesar pentru toate încărcările de fișiere. Butonul de trimitere va fi adăugat mai târziu în acest tutorial, când vom integra pluginul Uploadify.acțiune a formularului la pagina curentă, dar am trecut și valoarea "încărcări" în setul de interogări. 
Deci, ce se întâmplă când un utilizator selectează un fișier? Excluderea faptului că nu am integrat încă a depune butonul, datele fișierelor vor fi stocate în memoria temporară. Ne vom ocupa de procesul de salvare a fișierelor în dosarul nostru local într-un pas viitor. Pentru moment, să procedăm, presupunând că fișierele au fost salvate în dosarul "încărcări".
Să ascultăm pentru o încărcare cu PHP. Întoarce-te la tine index.php controlor. Imediat după ce ați creat o nouă instanță a clasei S3:
// instanțiați clasa $ s3 = noul S3 (awsAccessKey, awsSecretKey); // verificați dacă a fost trimis un formular. dacă (isset ($ _GET ['uploads']))
Amintiți-vă cum am setat acțiune atributul formularului să treacă ?Încărcări = complet în interogarea de interogare? Această valoare va fi apoi disponibilă pentru noi prin: $ _GET [ ''] încărcările. Deci, atunci când pagina se încarcă, dacă această valoare există, atunci știm că formularul a fost trimis. Excelent!
În continuare, ar trebui să declarăm câteva variabile, care fac referire la modul și locul în care vrem să susținem fișierele trimise. Următorul cod va fi plasat în dacă declarația de mai sus.
$ bucketName = 'meuUploader'; $ uploadsDir = 'încărcări /'; $ refused_types = array ("cerere / exe"); Când citiți "găleată", gândi "pliant."
S3 utilizează termenul găleată, dar se referă, în esență, la numele unui dosar din contul dvs. Simțiți-vă liber să numiți așa cum doriți. Mi-am sunat găleata, myUploadr.
Apoi, trebuie să știm unde au fost stocate fișierele încărcate. Apoi vom folosi acea cale pentru a încărca secvențial fișierele din acel dosar în galetul S3. Creați un dosar, numit încărcări, și plasați-o în rădăcina proiectului dvs..
În cele din urmă, ar trebui să desemnați fie tipurile de fișiere care pot fi încărcate, fie opusul. Această opțiune va depinde de nevoile specifice ale proiectului dvs. În acest caz, pentru a păstra lucrurile simple, vom nega toate executabil fișiere, dar nu ezitați să modificați cum doriți.
Rețineți că
$ refused_typesmatricea nu face nimic în sine. Este pur și simplu o matrice pe care o vom face mai târziu.
Pentru a determina cu ce fișiere trebuie să lucrăm, trebuie să scanăm directorul de încărcări. PHP oferă ajutor scandir pentru a permite acest lucru.
$ fișiere = scandir ($ uploadsDir); array_shift (fișiere $); array_shift (fișiere $);
Observați întotdeauna modul în care scandir funcția întoarce întotdeauna două elemente: "." și '? „? Acestea se referă la foldere și, deși am putea fi ceva mai tehnic despre asta, să fim leneși și să le alunecăm pe cei doi de pe lista noastră, folosind array_shift funcţie. Asta ne va lăsa cu:
Array ([0] => unele-file.jpg)
Bine, acum că avem o serie de fișiere care trebuie încărcate, să profităm de clasa S3! Să înțelegem asta. Avem nevoie să:
timp pentru aceasta. În caz contrar, riscăm suprascrierea fișierelor care au aceleași nume. // creați o nouă găleată $ S3-> putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); // filtra prin elementele din folderul "încărcări /" pentru ($ 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. $ fișiere [$ i], "$ bucketName", $ fileName, S3 :: ACL_PUBLIC_READ)) // șterge fișierul unlink ($ uploadsDir. $ files [$ i]); // actualizeaza fisiereArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName"; Bine, să luăm linia de cod în linie, pentru o claritate maximă.
$ S3-> putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); Această metodă a clasei $ S3 ne permite să adăugăm o nouă găleată în contul nostru S3. Acceptă doi parametri: numele găleții și permisiunile. Aici, am trecut în "myUploader" și am setat permisiunile pentru a citi publicul.
pentru ($ i = 0; $ i < count($files); $i++ )
Acest pentru declarația ne va permite să navigăm prin toate imaginile din încărcări pliant.
$ fileName = timp (). "-". $ Fișiere [$ i];
Această linie va asigura că numele fișierului este unic și nu se ciocnește cu fișierele existente în cupă pe S3. timp() funcția va prefixa un șir unic de caractere pentru numele fișierului nostru.
dacă $ ($ s3-> putObjectFile ($ uploadsDir. $ fișiere [$ i], "$ bucketName", $ fileName, S3 :: ACL_PUBLIC_READ))
Această linie gestionează procesul de încărcare a fișierului în S3, grație ajutorului putObjectFile metodă a clasei S3. Această metodă va accepta patru parametri primari.
deconectați ($ uploadsDir. $ files [$ i]);
Dacă fișierul a fost încărcat cu succes, nu mai avem nevoie să îl stocăm local. Putem șterge fișierul folosind PHP deconectez funcția și trecerea într-o cale spre fișierul care ar trebui șters.
Acum, dacă încărcăm mai multe fișiere în S3, care este probabil? Avem nevoie de un loc pentru a stoca căile către toate aceste fișiere, nu? În acest sens, să creăm o nouă matrice, numită $ filesArr.
// array care conține link-uri către toate imaginile încărcate $ filesArr = array ();
Puteți pune acest lucru în partea superioară a dvs. dacă afirmație. Cu matricea pe care am creat-o, trebuie doar să împingem calea către fiecare fișier încărcat.
// actualizeaza fisiereArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName";
Odata ce pentru declarația finalizează, $ fileArr va conține, în consecință, o listă de căi pentru fiecare fișier încărcat. Presto!
index.php Fişier Consultați mai jos codul sursă completat pentru "controlerul" nostru simplu.
putBucket ("$ bucketName", S3 :: ACL_PUBLIC_READ); // filtra prin elemente în folderul uplaod pentru ($ 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. $ fișiere [$ i], "$ bucketName", $ fileName, S3 :: ACL_PUBLIC_READ)) // șterge fișierul unlink ($ uploadsDir. $ files [$ i]); // actualizeaza fisiereArr $ filesArr [$ files [$ i]] = "http: //$bucketName.s3.amazonaws.com/$fileName"; include "index.tmpl.php"; 
Am scris toate funcționalitățile pentru server pentru aplicația noastră web mică. Dar acum, trebuie să rezolvăm procesul front-end de încărcare a mai multor fișiere către noi încărcări / director. Pentru a face acest lucru, vom profita de funcția Uploadify.
"Uploadify este un plugin jQuery care integrează un utilitar complet de încărcare a fișierelor personalizabile pe site-ul dvs. Utilizează un amestec de Javascript, ActionScript și orice limbă de pe server pentru a crea dinamic o instanță peste orice element DOM de pe o pagină.
Primul pas, atunci când integrați Uploadify, este să descărcați fișierele necesare. Acestea pot fi obținute aici. Redenumiți dosarul descărcat pentru a "încărca" și plasați-l în rădăcina directorului de proiect.
Apoi, trebuie să menționăm fișierele necesare din vizualizarea noastră. Intoarce-te index.tmpl.php, și, chiar înainte de închidere corp tag, adăugați:
Aici, facem referire la cea mai recentă versiune a jQuery, swfobject, script-ul de bază al lui Uploadify și propriul nostru scripts.js (puteți crea acel fișier acum).
Hai să acționăm acum.
('uploader': 'uploadify / uploadify.swf', 'script': 'uploadify / uploadify.php', 'uploadify' 'cancel': 'uploadify / cancel.png', 'dosar': 'uploads', 'auto': true, 'multi': true, 'wmode': 'transparent', ' , 'sizeLimit': 10485760, // 10 megs 'onAllComplete': function () // toate fișierele au terminat de încărcat locația = "index.php? uploads = complete";);) (); Activarea încărcării este la fel de simplă ca apelarea unei metode. Amintiți-vă, Uploadify este doar un plugin jQuery minunat. Această metodă acceptă o mulțime de parametri opționali. Vă încurajez să le priviți aici. Pentru nevoile noastre speciale, avem nevoie doar de o mână.
swf fișierul care gestionează butonul de trimitere uploadify.php transparent pentru a vă asigura că nu există probleme de tip "z-index", unde butonul este afișat într-un meniu derulant sau ceva similar. Încărcări = complet param în șirul de interogare. Ar trebui să o facă! Doar asigurați-vă că sunați pe noi uploadify funcția de la partea de jos a scripts.js.
myUploadr.uploadify ();
Acest cod va aplica butonul personalizat în formularul dvs. și se va ocupa, de asemenea, de logica încărcării și transferării fișierelor în dosarul necesar.
În acest moment, am scris cea mai mare parte a logicii noastre. Dar este o ultimă sarcină pe care trebuie să o terminăm. Amintiți-vă când am scris logica care a preluat încărcările în contul nostru S3? Am stocat link-urile într-un mulțime, denumit $ filesArr.
Atunci când forma noastră se încarcă, ar trebui să determinăm dacă aceasta mulțime există și nu este gol. În acest caz, fișierele au fost deja încărcate, caz în care trebuie doar să afișăm linkuri către fiecare material încărcat.
Intoarce-te index.tmpl.php, și, sub forma primară, adăugați următoarele:
Legături către fișierele încărcate
$ path):?>
- „>
Acest bit de cod determină mai întâi dacă $ filesArr există. În caz contrar, acesta conține atât numele, cât și legătura cu fiecare fișier încărcat. Pentru a afișa acele linkuri, procesul este la fel de simplu ca și filtrarea prin fiecare element din matrice și prin ecuația unei etichete de ancoră care face legătura cu fișierul asociat.
Ar trebui să o facă! Acum, că toate funcționalitățile sunt în afara modului, următorul pas este să modelați pagina în funcție de nevoile dvs. specifice. Am putea acoperi acest lucru, dar este cu siguranță dincolo de scopul acestui tutorial. Utilizați-vă imaginația - iată ce am ajuns.
Vă mulțumim pentru lectură și spuneți-mi dacă aveți întrebări! Dacă unele părți ale tutorialului scrisului v-au confundat, asigurați-vă că ați urmărit și scenariul!
