Share
In deze zelfstudie laat ik je zien hoe je een Flash-uploader kunt bouwen voor het uploaden van bestanden vanaf de computer van de gebruiker. Het resultaat is ideaal voor grote bestandsgroottes omdat het een voortgangsbalk weergeeft en het resterende percentage om te uploaden. We laten de gebruiker zelfs het aantal bytes zien dat per seconde is geüpload.
Mappictogram door Michael Ludwig.
Opmerking van de uitgever: Ik ben bang dat er geen demo is voor deze tut - je zult de source.zip moeten downloaden en spelen met het uploaden van bestanden naar je eigen server :)
Maak een nieuw ActionScript 3.0-Flash-bestand en stel de afmetingen in op 500 x 100 pixels. We beginnen met het maken van een selectieknop. Teken een afgeronde rechthoek, ik heb de mijne gemaakt met een 5px ronde hoek, een blauwe verloop en een 2px grijze lijn.
Druk op F8 om er een knop van te maken en geef hem de instantienaam "selecteren". Noem de knop op het podium "select_btn".
Vul binnen de knop de 3 toestanden in met een iets ander verloop. Maak een nieuwe laag boven de eerste en voeg een statisch tekstveld toe met de tekst "SELECTIE BESTAND". Het is het beste om de items te scheiden, omdat het later gemakkelijker is ze te bewerken.
Terug naar het hoofdpodium, maak een nieuwe ronde doos met een witte kleur en een grijze lijn. Dit is de voortgangsbalk. Ik heb de mijne zo gedaan:
Druk opnieuw op F8 en verander het in een filmclip met de naam "voortgang". Maak binnen de voortgangsfilmclip nog 2 lagen boven de eerste en verplaats de witte vulling naar de derde laag, waarbij alleen de lijn op de eerste laag overblijft ... Hernoem de eerste laag "marge", de tweede "balk" en de derde "masker". We gaan de derde laag in een masker veranderen.
Creëer op de "bar" -laag een blauw rectange met dezelfde afmetingen als de opvullaag, maar wees voorzichtig om het iets groter te maken, zodat we bij het aanbrengen van het masker geen gaten hebben. Plaats het op 0,0 en verander het in een filmclip met de instantienaam "bar". Dit is de balk die de voortgang aangeeft.
Klik met de rechtermuisknop op de derde laag en selecteer "Maskeren" in het menu. Je zou zoiets als dit moeten hebben:
Klik in de bibliotheek met de rechtermuisknop op de selectieknop die we eerder hebben gemaakt en selecteer "Dupliceren". Noem het duplicaat "cancel" en verander in de knop de tekst van het tekstveld naar "CANCEL". We maken een duplicaat van de selectieknop die de annuleerknop zal zijn. We zullen later slechts een van hen in de fase laten zien.
Maak in de hoofdscène een andere laag boven de eerste en plaats de nieuw gemaakte annuleerknop op dezelfde positie als de selectieknop.
We zijn bijna klaar met de activa. Maak een nieuw tekstveld, dit keer een dynamisch tekstveld en geef het de instantienaam "label_txt". Dit toont de gebruiker het succesbericht, het foutbericht of het voortgangspercentage. Zorg ervoor dat de tekst niet selecteerbaar is.
Test het bestand om te zien hoe het gaat.
We hoeven nog maar één ding te doen voordat we beginnen met coderen; stel de documentklasse in op "Uploader".
Maak in dezelfde map als het Flash-bestand een nieuw ActionScript-bestand met de naam "Uploader.as". De naam is belangrijk voor de klas. Begin met het coderen van het standaardpakket en importeer de vereiste klassen. Ik heb "import Flash.display. *" Gebruikt voor snelheid, maar zodra we klaar zijn, kunnen we alleen de vereiste klassen opnemen om het bestand kleiner te maken.
pakket import Flash.display. *; import Flash.events. *; importeer Flash.text. *; importeer Flash.net.FileReference; import Flash.net.FileReferenceList; importeer Flash.net.FileFilter; importeer Flash.net.URLRequest; import Flash.utils.Timer; import Flash.events.TimerEvent; public class Uploader breidt MovieClip uit
We beginnen met het instellen van enkele variabelen:
public class Uploader breidt MovieClip uit var file: FileReference; var filefilters: Array; var req: URLRequest; var tm: Timer; var snelheid: Number = 0; var currbytes: Number = 0; var lastbytes: Number = 0;
Maak de constructorfunctie en voeg het volgende toe:
publieke functie Uploader () req = nieuwe URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.cbesslabs.com'; //'http://cbess.ro/templates/Flashtuts/Flash_uploader/upload.php '; bestand = nieuw FileReference (); setup (bestand); select_btn.addEventListener (MouseEvent.CLICK, bladeren); progress_mc.bar.scaleX = 0; cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false;
Laat me uitleggen wat hier gebeurt:
We maken een nieuwe URLRequest-klasse en stellen de URL in voor het php-bestand voor uploaden.
De lijn "(stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.google.com'" is een voorwaardelijke, wat betekent dat als we de film de parameter leveren f, het zal de URL instellen op de f parameter. Anders gebruikt het de string die hier hard is gecodeerd, goed nieuws Google, alleen voor testen.
We doen de voorwaarden, zodat we het bestand opnieuw kunnen gebruiken. Op deze manier kunnen we alleen de f parameter met een pad naar de URL en deze wordt geüpload naar de opgegeven URL.
Vervolgens maken we een nieuw FileReference-object, de klasse die het uploadproces afhandelt. We geven het FileReference-object door aan de functie-instelling () die we later zullen coderen om de verschillende luisteraars in te stellen.
Ten slotte voegen we klik luisteraars toe aan de select en annuleer knoppen, zet de schaal van de voortgangsbalk op 0 en verberg de annuleerknop.
We maken nu de setup () -functie.
persoonlijke functie-instelling (bestand: FileReference) file.addEventListener (Event.CANCEL, cancel_func); file.addEventListener (Event.COMPLETE, complete_func); file.addEventListener (IOErrorEvent.IO_ERROR, io_error); file.addEventListener (Event.OPEN, open_func); file.addEventListener (ProgressEvent.PROGRESS, progress_func); file.addEventListener (Event.SELECT, selectHandler); file.addEventListener (DataEvent.UPLOAD_COMPLETE_DATA, show_message);
We kunnen de gebeurtenis Event.COMPLETE en Event.CANCEL weglaten, maar ik heb ze alleen voor testen toegevoegd. We stellen een CANCEL-gebeurtenis in voor wanneer de gebruiker de selectiedialoog annuleert. Wij hebben:
Zorg ervoor dat je alle evenementfuncties maakt, anders krijg je een foutmelding.
We gaan door met de bladerfunctie, geactiveerd wanneer op de selectieknop is geklikt. We moeten het dialoogvenster tonen zodat de gebruiker een bestand kan selecteren:
Accentsconagua
public function browse (e: MouseEvent) filefilters = [new FileFilter ('Images', '* .jpg')]; // voeg andere bestandsfilters toe file.browse (filefilters); Merk op dat ik een FileFilter-object in een array heb toegevoegd en de array aan de FileReference-objecten heb toegevoegd doorbladeren methode. U kunt een ander bestandstype toevoegen door een ander FileFilter-object met een andere extensie toe te voegen. Hiermee worden de bestandsextensies in het selectiedialoogvenster gefilterd, zodat de gebruiker alleen de juiste bestandstypen kan selecteren. Dit is alleen een bestandsnaamcontrole en controleert niet of het afbeeldingsbestand inderdaad een afbeelding is.
Wanneer de gebruiker een bestand heeft geselecteerd om te uploaden, wordt de gebeurtenis SELECT geactiveerd. We bellen nu FileReference's uploaden() methode om het bestand naar het php-bestand op de server te uploaden met het argument voor url-aanvraag.
persoonlijke functie selectHandler (e: Event) file.upload (req);
Les's maken de functie open_func. Deze functie wordt geactiveerd wanneer het uploaden begint. We verbergen de selectieknop en tonen de knop Annuleren.
private function open_func (e: Event) cancel_btn.visible = true; select_btn.visible = false;
Maak de voortgangsfunctie:
persoonlijke functie progress_func (e: ProgressEvent) progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal; var tf = new TextFormat (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% geüpload';
Laat me uitleggen wat hier gebeurt. We bepalen de schaal van de bar-filmclip met het geüploade percentage. Dit wordt bereikt door de bytesLoaded te delen door bytesTotal-eigenschappen van het gebeurtenisobject. De voortgangsgebeurtenis geeft ons het aantal geüploade bytes en totale bytes van het bestand.
Vervolgens maken we een TextFormat-object en stellen we de kleur in op zwart (0x000000) voor het tekstlabel. We hebben deze stap nodig, want later zullen we de kleur van de tekst volgens het bericht wijzigen in groen of rood.
Ten slotte stellen we de tekst van het tekstveld in met het percentage dat is geüpload.
We maken de foutfunctie:
persoonlijke functie io_error (e: IOErrorEvent) var tf = new TextFormat (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Het bestand kon niet worden geüpload.'; cancel_btn.visible = false; select_btn.visible = true;
Kortom, we veranderen de kleur van de labeltekst, plaatsen deze in een foutmelding en wisselen vervolgens de annuleer- en selectieknoppen opnieuw uit.
Laten we het maken toon bericht functie die controleert of de upload geslaagd is:
persoonlijke functie show_message (e: DataEvent) var tf = new TextFormat (); if (e.data == 'ok') tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Het bestand is geüpload.'; else if (e.data == 'error') tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Het bestand kon niet worden geüpload.';
Hier testen we of de eigenschap data van de gebeurtenis UPLOAD_COMPLETE_DATA 'ok' of 'error' is en een bericht op de juiste manier weergeeft. De eigenschap data van deze gebeurtenis bevat de serverreactie van het php-script.
Dit is de laatste functie die wordt geactiveerd wanneer op de knop Annuleren wordt geklikt. Dit roept de FileReference's annuleren() functie om de upload te annuleren. We roepen ook reset () op om op te ruimen.
privéfunctie cancelUpload (e: MouseEvent) file.cancel (); reset ();
We activeren een reset () -functie om de items op te schonen, de tekst op "" te zetten en de knoppen annuleren en selecteren om te wisselen:
persoonlijke functie reset () cancel_btn.visible = false; select_btn.visible = true; label_txt.text = "; progress_mc.bar.scaleX = 0;
Ga je gang en test het bestand in Flash.
Voorlopig werkt de upload, maar aan het eind krijgen we de foutmelding. Dit komt omdat we de padparameter niet hebben opgegeven, dus neemt de swf de hardgecodeerde Google-pagina. Omdat die pagina ons niet 'ok' retourneert, krijgen we de foutmelding. We moeten het php-bestand bouwen ...
Laten we de gebruiker de snelheid tonen waarmee hij uploadt. Voeg in de constructorfunctie de regels toe:
tm = nieuwe Timer (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed);
We maken een timer die elke seconde wordt uitgevoerd en controleert de snelheid.
Voeg in de functie open_func () deze regel toe:
tm.start ();
Hiermee wordt de timer gestart wanneer het uploaden begint. We maken nu de updateSpeed () -methode:
persoonlijke functie updateSpeed (e: TimerEvent) speed = Math.floor ((currbytes - lastbytes) / 1024); lastbytes = currbytes;
Dit is wat hier gebeurt: we berekenen de snelheid door de variabele af te trekken lastbytes van currbytes. De lastbytes variabele wordt naderhand ingesteld op de currbytes. Dus, als beide variabelen 0 zijn, is de snelheid 0. De currbytes-variabele houdt het huidige aantal bytes geüpload. We hebben hier geen directe toegang toe, daarom hebben we de currbytes-variabele gemaakt. Deze variabele wordt ingesteld vanuit onze PROGRESS-gebeurtenis, waarbij we toegang kunnen krijgen tot de eigenschap bytesLoaded.
Ten slotte delen we alles in 1024 om het resultaat in kilobytes te krijgen en rond de waarde voor weergave met Math.floor ().
Laten we de laatste wijziging toevoegen, zodat we verder kunnen gaan met het php-script. Wijzig in de progress_func () de regel:
label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% geüpload';
hiermee:
label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% geüpload' + snelheid + 'kb / s';
Hier is de volledige code voor de Flash-uploader:
pakket import Flash.display. *; import Flash.events. *; importeer Flash.text. *; importeer Flash.net.FileReference; import Flash.net.FileReferenceList; importeer Flash.net.FileFilter; importeer Flash.net.URLRequest; import Flash.utils.Timer; import Flash.events.TimerEvent; public class Uploader breidt MovieClip uit var file: FileReference; var filefilters: Array; var req: URLRequest; var tm: Timer; var snelheid: Number = 0; var currbytes: Number = 0; var lastbytes: Number = 0; publieke functie Uploader () req = nieuwe URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.google.com'; bestand = nieuw FileReference (); setup (bestand); select_btn.addEventListener (MouseEvent.CLICK, bladeren); progress_mc.bar.scaleX = 0; tm = nieuwe Timer (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed); cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false; openbare functie bladeren (e: MouseEvent) filefilters = [new FileFilter ('Images', '* .jpg')]; // voeg andere bestandsfilters toe file.browse (filefilters); persoonlijke functie-instelling (bestand: FileReference) file.addEventListener (Event.CANCEL, cancel_func); file.addEventListener (Event.COMPLETE, complete_func); file.addEventListener (IOErrorEvent.IO_ERROR, io_error); file.addEventListener (Event.OPEN, open_func); file.addEventListener (ProgressEvent.PROGRESS, progress_func); file.addEventListener (Event.SELECT, selectHandler); file.addEventListener (DataEvent.UPLOAD_COMPLETE_DATA, show_message); private functie cancel_func (e: Event) trace ('cancelled!'); private function complete_func (e: Event) trace ('compleet!'); persoonlijke functie io_error (e: IOErrorEvent) var tf = new TextFormat (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Het bestand kon niet worden geüpload.'; tm.stop (); cancel_btn.visible = false; select_btn.visible = true; private function open_func (e: Event) // trace ('opened!'); tm.start (); cancel_btn.visible = true; select_btn.visible = false; persoonlijke functie progress_func (e: ProgressEvent) progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal; var tf = new TextFormat (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% geüpload' + snelheid + 'kb / s'; currbytes = e.bytesLoaded; persoonlijke functie selectHandler (e: Event) file.upload (req); private function show_message (e: DataEvent) tm.stop (); var tf = new TextFormat (); if (e.data == 'ok') tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Het bestand is geüpload.'; else if (e.data == 'error') tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Het bestand kon niet worden geüpload.'; persoonlijke functie updateSpeed (e: TimerEvent) speed = Math.round ((currbytes - lastbytes) / 1024); lastbytes = currbytes; private functie cancelUpload (e: MouseEvent) file.cancel (); reset (); private function reset () cancel_btn.visible = false; select_btn.visible = true; label_txt.text = "; progress_mc.bar.scaleX = 0; Laten we snel ons php-script bouwen:
Ik zal dit snel samenvatten (PHP valt niet strikt binnen het bereik van deze tut). We definiëren een pad waar we het bestand zullen plaatsen, en dan controleren we of de $ _FILES ['Filedata'] ['error'] 0 is (als er geen fouten zijn). We controleren dan of move_uploaded_file () het bestand in de map succesvol heeft overgebracht en we laten "ok" of "error" zien, afhankelijk van het resultaat.
Nog een laatste punt: u moet ervoor zorgen dat de map bestaat en dat deze beschrijfbaar is voordat het script wordt uitgevoerd.
Dit is het einde van onze tutorial. Bedankt voor het lezen, ik hoop dat je iets hebt geleerd!
