Share
În acest tutorial vă vom arăta cum să construiți un uploader Flash pentru încărcarea fișierelor de pe computerul utilizatorului. Rezultatul va fi ideal pentru dimensiunile mari ale fișierelor deoarece va afișa o bară de progres și procentajul lăsat pentru încărcare. Vom afișa utilizatorului chiar numărul de octeți încărcați pe secundă.
Folder icon de Michael Ludwig.
Nota editorului: Mă tem că nu există demo pentru acest tut - va trebui să descărcați source.zip și să jucați în jur cu încărcarea fișierelor în propriu Server :)
Creați un nou fișier Flash ActionScript 3.0 și setați dimensiunile la 500 x 100 pixeli. Vom începe prin crearea unui buton selectat. Desenează un dreptunghi rotunjit, am făcut-o cu un colț rotund de 5px, un gradient albastru și un accident vascular cerebral gri de 2px.
Apăsați F8 pentru ao transforma într-un buton și dați-i numele de instanță "select". Denumiți butonul de pe scena "select_btn".
În interiorul butonului, completați cele trei stări cu un gradient ușor diferit. Creați un alt strat deasupra primului și adăugați un câmp de text static cu textul "SELECT FILE". Cel mai bine este să separați activele, deoarece este mai ușor să le editați mai târziu.
Înapoi la scena principală, creați o altă cutie rotunjită, cu culoarea albă și un accident vascular cerebral gri. Aceasta va fi bara de progres. Am făcut-o așa:
Din nou, apăsați F8 și transformați-l într-un film cu numele "progres". În interiorul progresului movieclip, creați încă două straturi deasupra primului și mutați plinul alb în a treia, lăsând doar cursa pe primul strat ... Redenumiți primul strat "margine", al doilea "bar" și a treia "mască". Vom transforma al treilea strat într-o mască.
În stratul "bar", creați o rectangură albastră cu aceleași dimensiuni ca stratul de umplere, dar fiți atenți să o faceți puțin mai mare, astfel încât atunci când aplicăm masca să nu avem găuri. Plasați-l la 0,0 și transformați-l într-un movieclip cu numele de instanță "bar". Aceasta va fi bara care va arăta progresul.
Faceți clic dreapta pe al treilea strat și selectați "Mască" din meniu. Ar trebui să aveți ceva de genul:
În bibliotecă, faceți clic dreapta pe butonul de selectare pe care l-am creat mai devreme și selectați "Duplicat". Denumiți duplicatul "anulați", iar în butonul modificați textul câmpului text în "CANCEL". Facem un duplicat al butonului de selecție care va fi butonul de anulare. Mai târziu vom arăta doar unul dintre ei în scenă.
În scena principală, creați un alt strat deasupra primului și plasați cu exactitate noul buton de anulare în aceeași poziție cu butonul de selectare.
Aproape am terminat cu activele. Creați un alt câmp de text, de data aceasta un câmp de text dinamic și dați-i numele de instanță "label_txt". Aceasta va afișa utilizatorului mesajul de succes, mesajul de eroare sau procentul de progres. Asigurați-vă că textul nu este selectabil.
Testați fișierul, pentru a vedea cum merge.
Mai avem încă un lucru înainte să începem să codificăm; setați clasa de documente la "Uploader".
În același director ca fișierul Flash, creați un nou fișier ActionScript cu numele "Uploader.as". Numele este important pentru ca clasa să fie găsită. Începeți să codificați pachetul implicit și să importați clasele necesare. Am folosit "import Flash.display. *" Pentru viteză, dar odată ce am terminat, putem include doar clasele necesare pentru a face fișierul mai mic.
pachet import Flash.display. *; importați Flash.events. *; importați Flash.text. *; import Flash.net.FileReference; import Flash.net.FileReferenceList; import Flash.net.FileFilter; importați Flash.net.URLRequest; importați Flash.utils.Timer; importați Flash.events.TimerEvent; public class Uploader extinde MovieClip
Vom începe prin stabilirea câtorva variabile:
public class Uploader extinde MovieClip var file: FileReference; fișiere de fișiere var: Array; var req: URLRequest; var tm: Timer; var viteză: număr = 0; var currbytes: Număr = 0; var lastbytes: Număr = 0;
Creați funcția Constructor și adăugați următoarele:
funcția publică Uploader () req = new URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: "http://www.cbesslabs.com"; //'http://cbess.ro/templates/Flashtuts/Flash_uploader/upload.php "; fișier = FileReference nou (); configurare (fișier); select_btn.addEventListener (MouseEvent.CLICK, răsfoiți); progress_mc.bar.scaleX = 0; cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false;
Permiteți-mi să vă explic ce se întâmplă aici:
Creați o nouă clasă URLRequest și setați urlul în fișierul de încărcare php.
Linia "(stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f:" http://www.google.com "" este condiționată, adică dacă oferim filmului parametrul f, acesta va seta url la f parametru. În caz contrar, va folosi codul hardcoded aici, bun pentru Google, doar pentru testare.
Facem condiționarea, astfel încât să reutilizăm fișierul. În acest fel, putem schimba numai f parametru cu o cale către url și se va încărca pe urlul specificat.
Apoi creăm un nou obiect FileReference, clasa care gestionează procesul de încărcare. Transmitem fișierul FileReference Objectului la funcția setup () pe care o vom codifica mai târziu pentru a configura diferiții ascultători.
În cele din urmă, adăugăm ascultătorii de clic pe butoanele de selectare și anulare, setați scara barei de progres la 0 și ascundeți butonul de anulare.
Acum creăm funcția setup ().
setarea funcției private (fișier: FileReference) file.addEventListener (Event.CANCEL, cancel_func); file.addEventListener (Event.COMPLETE, complete_func); file.addEventListener (IOErrorEvent.IO_ERROR, io_error); file.addEventListener (Eveniment.OPEN, open_func); file.addEventListener (ProgressEvent.PROGRESS, progress_func); file.addEventListener (eveniment.SELECT, selectațiHandler); fișier.addEventListener (DataEvent.UPLOAD_COMPLETE_DATA, show_message);
Am putea omite evenimentul Event.COMPLETE și Event.CANCEL, dar le-am adăugat doar pentru testare. Setăm un eveniment CANCEL când utilizatorul anulează dialogul de selectare. Noi avem:
Asigurați-vă că creați toate funcțiile evenimentului, altfel veți obține o compilare a erorilor.
Continuăm cu funcția de răsfoire, declanșată la apăsarea butonului selectare. Trebuie să afișăm caseta de dialog astfel încât utilizatorul să poată selecta un fișier:
Accentsconagua
căutarea funcției publice (e: MouseEvent) filefilters = [new FileFilter ('Images', '* .jpg')]; // adăugați alte filtre de fișiere file.browse (filefilters); Observați că am adăugat un obiect FileFilter în interiorul unui matrice și am adăugat matricele la FileReference naviga metodă. Puteți adăuga un alt tip de fișier adăugând un alt obiect FileFilter cu o extensie diferită. Astfel se vor filtra extensiile de fișiere în caseta de selectare, astfel încât utilizatorul să poată selecta numai tipurile corecte de fișiere. Aceasta este doar o verificare a fișierului și nu verifică dacă fișierul imagine este într-adevăr o imagine.
Când utilizatorul a selectat un fișier pentru încărcare, evenimentul SELECT este declanșat. Acum sunăm la FileReference încărcați () metoda de încărcare a fișierului în fișierul php de pe server cu argumentul solicitării url.
funcția privată selectHandler (e: Eveniment) file.upload (req);
Les creează funcția open_func. Această funcție este declanșată când începe încărcarea. Vom ascunde butonul de selectare și vom afișa butonul de anulare.
funcția privată open_func (e: Event) cancel_btn.visible = true; select_btn.visible = false;
Creați funcția de progres:
funcția privată progress_func (e: ProgressEvent) progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal; var tf = TextFormat nou (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% încărcat';
Permiteți-mi să vă explic ce se întâmplă aici. Stabiliți scara barei de movieclip care arată procentul încărcat. Aceasta se realizează prin împărțirea proprietăților bytesLoaded la bytesTotal a obiectului evenimentului. Evenimentul de progres ne oferă cantitatea de octeți încărcați și octeți totali ai fișierului.
Apoi, vom crea un obiect TextFormat și vom seta culoarea la negru (0x000000) pentru eticheta de text. Avem nevoie de acest pas deoarece mai târziu vom schimba culoarea textului în verde sau roșu în funcție de mesaj.
În cele din urmă, am setat textul câmpului text cu procentajul încărcat.
Vom crea funcția de eroare:
funcția privată io_error (e: IOErrorEvent) var tf = TextFormat nou (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Fișierul nu a putut fi încărcat.'; cancel_btn.visible = false; select_btn.visible = true;
Practic, schimbăm culoarea textului etichetei, setăm-o la un mesaj de eroare și apoi schimbăm din nou butoanele de anulare și selectare.
Să creăm show_message care va verifica dacă încărcarea a avut succes:
funcția privată show_message (e: DataEvent) var tf = new TextFormat (); dacă (e.data == 'ok') tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Fișierul a fost încărcat.'; altfel dacă (e.data == 'error') tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Fișierul nu a putut fi încărcat.';
Aici, testați dacă proprietatea de date a evenimentului UPLOAD_COMPLETE_DATA este "ok" sau "error" și afișați un mesaj în mod corespunzător. Proprietatea de date a acestui eveniment conține răspunsul serverului din scriptul php.
Aceasta este ultima funcție care va fi declanșată la apăsarea butonului de anulare. Aceasta sună la FileReference Anulare() pentru a anula încărcarea. Suntem, de asemenea, apelați reset () pentru a curăța.
funcția privată cancelUpload (e: MouseEvent) file.cancel (); reset ();
Activați o funcție reset () pentru a curăța activele, setați textul la "" și schimbați butoanele de anulare și selectare:
resetarea funcției private () cancel_btn.visible = false; select_btn.visible = true; label_txt.text = "; progress_mc.bar.scaleX = 0;
Continuați și testați fișierul în Flash.
Deocamdată, încărcarea funcționează, dar la final primim mesajul de eroare. Acest lucru se datorează faptului că nu am furnizat parametrul căii, astfel că swf ia pagina Google hardcoded. Deoarece pagina nu ne întoarce "ok", obținem eroarea. Trebuie să construim fișierul php ...
Să arătăm utilizatorului viteza cu care se încarcă. În funcția constructor adăugați liniile:
tm = timer nou (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed);
Creăm un cronometru care va funcționa în fiecare secundă și va verifica viteza.
În funcția open_func () adăugați această linie:
tm.start ();
Aceasta va porni temporizatorul când începe încărcarea. Acum vom crea metoda updateSpeed ():
funcția privată updateSpeed (e: TimerEvent) speed = Math.floor ((currbytes - lastbytes) / 1024); lastbytes = currbytes;
Asta se întâmplă aici: calculăm viteza scăzând variabila lastbytes din currbytes. lastbytes este apoi setată la currbytes. Deci, când ambele variabile sunt 0, viteza este 0. Variabila currbytes va menține numărul actual de octeți încărcați. Nu putem accesa direct acest lucru, de aceea am creat variabila currbytes. Această variabilă va fi setată de la evenimentul PROGRESS unde putem accesa proprietatea bytesLoaded.
În cele din urmă, împărțim totul cu 1024 pentru a obține rezultatul în kilobyte și rotunjim valoarea pentru afișare cu Math.floor ().
Să adăugăm ultima modificare pentru a putea trece la scriptul php. În progress_func () modificați linia:
label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% încărcat';
cu asta:
label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% încărcat' + viteză + 'kb / s';
Aici este codul complet pentru încărcătorul Flash:
pachet import Flash.display. *; importați Flash.events. *; importați Flash.text. *; import Flash.net.FileReference; import Flash.net.FileReferenceList; import Flash.net.FileFilter; importați Flash.net.URLRequest; importați Flash.utils.Timer; importați Flash.events.TimerEvent; public class Uploader extinde MovieClip var file: FileReference; fișiere de fișiere var: Array; var req: URLRequest; var tm: Timer; var viteză: număr = 0; var currbytes: Număr = 0; var lastbytes: Număr = 0; funcția publică Uploader () req = new URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: "http://www.google.com"; fișier = FileReference nou (); configurare (fișier); select_btn.addEventListener (MouseEvent.CLICK, răsfoiți); progress_mc.bar.scaleX = 0; tm = timer nou (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed); cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false; căutarea funcției publice (e: MouseEvent) filefilters = [new FileFilter ('Images', '* .jpg')]; // adăugați alte filtre de fișiere file.browse (filefilters); configurarea funcției private (fișier: FileReference) file.addEventListener (Event.CANCEL, cancel_func); file.addEventListener (Event.COMPLETE, complete_func); file.addEventListener (IOErrorEvent.IO_ERROR, io_error); file.addEventListener (Eveniment.OPEN, open_func); file.addEventListener (ProgressEvent.PROGRESS, progress_func); file.addEventListener (eveniment.SELECT, selectațiHandler); fișier.addEventListener (DataEvent.UPLOAD_COMPLETE_DATA, show_message); funcția privată cancel_func (e: Event) trace ('canceled!'); funcția privată full_func (e: Event) trace ('complete!'); funcția privată io_error (e: IOErrorEvent) var tf = new TextFormat (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Fișierul nu a putut fi încărcat.'; tm.stop (); cancel_btn.visible = false; select_btn.visible = true; funcția privată open_func (e: Event) // trace ('opened!'); tm.start (); cancel_btn.visible = true; select_btn.visible = false; funcția privată progress_func (e: ProgressEvent) progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal; var tf = TextFormat nou (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% încărcat' + viteză + 'kb / s'; currbytes = e.bytesLoaded; funcția privată selectHandler (e: Event) file.upload (req); funcția privată show_message (e: DataEvent) tm.stop (); var tf = TextFormat nou (); dacă (e.data == 'ok') tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Fișierul a fost încărcat.'; altfel dacă (e.data == 'error') tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Fișierul nu a putut fi încărcat.'; funcția privată updateSpeed (e: TimerEvent) speed = Math.round ((currbytes - lastbytes) / 1024); lastbytes = currbytes; funcția privată cancelUpload (e: MouseEvent) file.cancel (); reset (); resetarea funcției private () cancel_btn.visible = false; select_btn.visible = true; label_txt.text = "; progress_mc.bar.scaleX = 0; Să ne construim rapid scriptul php:
Voi sinteti rapid acest lucru (PHP nu este strict in sfera acestui tut). Definim o cale în care vom pune fișierul, apoi verificăm dacă $ _FILES ['Filedata'] ['error'] este 0 (dacă nu există erori). Apoi, verificăm dacă move_uploaded_file () a transferat cu succes fișierul în dosar și vom afișa "ok" sau "error" în funcție de rezultat.
Un ultim punct: va trebui să vă asigurați că folderul există și este scris înainte de a executa scriptul.
Acesta este sfârșitul tutorialului nostru. Mulțumesc că ați citit, sper că ați învățat ceva!
