Share
I denne opplæringen vil jeg vise deg hvordan du lager en Flash-opplastingsprogram for opplasting av filer fra brukerens datamaskin. Resultatet vil være ideelt for store filstørrelser, da det vil vise en fremdriftslinje og prosentandelen som skal lastes opp. Vi viser til og med brukeren antall byte lastet per sekund.
Mappeikonet av Michael Ludwig.
Redaktørens notat: Jeg er redd for at det ikke er noen demo for denne tut - du må laste ned source.zip og spille rundt med å laste opp filer til din egen server :)
Opprett en ny FlashScript-fil for ActionScript 3.0 og sett dimensjonene til 500 x 100 piksler. Vi begynner med å opprette en valgknapp. Tegn et rundet rektangel, jeg har laget min med et 5px rundt hjørne, en blå gradient og en 2px grå slag.
Trykk på F8 for å slå den til en knapp og gi den instansnavnet "velg". Navn på knappen på scenen "select_btn".
På innsiden av knappen fyller du 3 tilstandene med en litt annen gradient. Lag et annet lag over det første og legg til et statisk tekstfelt med teksten "VELG FILE". Det er best å skille eiendelene fordi det er lettere å redigere dem senere.
Tilbake til hovedstadiet, lag en annen avrundet boks med en hvit farge og et grått slag. Dette blir fremdriftslinjen. Jeg gjorde min som dette:
Igjen, trykk F8 og slå den inn i en filmklipp med navnet "fremgang". Inne i fremdriftsfilmen, lag 2 flere lag over det første og flytt den hvite fylle inn i tredje, og la bare streken på det første laget ... Gi nytt navn til det første laget "margin", den andre "baren" og den tredje "masken". Vi skal dreie det tredje laget i en maske.
På "bar" -laget lager du en blå rektangulær med samme dimensjoner som fyllingslaget, men vær forsiktig for å gjøre det litt større, slik at når vi bruker masken, har vi ikke hull. Plasser den på 0,0 og slå den inn i en filmklipp med forekomstnavnet "bar". Dette vil være linjen som viser fremgangen.
Høyreklikk det tredje laget og velg "Mask" fra menyen. Du burde ha noe slikt:
I biblioteket høyreklikker du på valgknappen vi opprettet tidligere, og velger "Dupliser". Navngiv duplikatet "avbryt" og i knappen endrer tekstfeltens tekst til "AVBRYT". Vi lager et duplikat av valgknappen som vil være Avbryt-knappen. Vi viser senere bare en av dem i scenen.
I hovedscenen lager du et annet lag over det første og legger den nyopprettede avbrytningsknappen exacly i samme posisjon som valgknappen.
Vi er nesten ferdige med eiendelene. Opprett et annet tekstfelt, denne gangen et dynamisk tekstfelt og gi det forekomstnavnet "label_txt". Dette vil vise brukeren suksessmeldingen, feilmeldingen eller prosentsatsen. Pass på at teksten ikke kan velges.
Test filen, for å se hvordan den går.
Vi har bare en ting til å gjøre før vi begynner koding; sett dokumentet klassen til "Uploader".
I samme mappe som Flash-filen, opprett en ny ActionScript-fil med navnet "Uploader.as". Navnet er viktig for at klassen skal bli funnet. Begynn å kode standardpakken og importere de nødvendige klassene. Jeg har brukt "importer Flash.display. *" For fart, men når vi er ferdige, kan vi bare inkludere de nødvendige klassene for å gjøre filen mindre.
pakke import Flash.display. *; importer Flash.events. *; importer Flash.text. *; importere Flash.net.FileReference; importer Flash.net.FileReferenceList; importer Flash.net.FileFilter; importere Flash.net.URLRequest; importer Flash.utils.Timer; importer Flash.events.TimerEvent; offentlig klassesopplasting utvider MovieClip
Vi begynner med å sette inn noen få variabler:
Public Class Uploader utvider MovieClip var fil: FileReference; var filtre: Array; var req: URLRequest; var tm: Timer; var hastighet: tall = 0; var currbytes: tall = 0; Var lastbytes: Nummer = 0;
Opprett konstruktørfunksjonen og legg til følgende:
offentlig funksjon Uploader () req = ny URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.cbesslabs.com'; //'http://cbess.ro/templates/Flashtuts/Flash_uploader/upload.php '; fil = ny filreferanse (); oppsett (fil); select_btn.addEventListener (MouseEvent.CLICK, bla gjennom); progress_mc.bar.scaleX = 0; cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false;
La meg forklare hva som skjer her:
Vi oppretter en ny URLRequest-klasse og angir nettadressen til opplastings-php-filen.
Køen "(stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.google.com'" er en betinget, som betyr at hvis vi gir filmen parameteren f, det vil sette url til f parameter. Ellers vil den bruke strengen hardcoded her, god ol 'Google, for testing bare.
Vi gjør betingelsene, slik at vi kan gjenbruke filen. På denne måten kan vi bare endre f parameter med en bane til webadressen, og den vil laste opp til den angitte nettadressen.
Deretter oppretter vi et nytt FileReference Object, klassen som håndterer opplastingsprosessen. Vi overfører FileReference Object til funksjonsoppsettet () som vi senere vil kode for å sette opp de ulike lytterne.
Til slutt legger vi til klikklyttere til velg og avbryt knapper, sett skalaen til fremdriftslinjen til 0 og skjul avbryt-knappen.
Vi lager nå oppsettet () -funksjonen.
privat funksjon oppsett (fil: 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);
Vi kunne utelate hendelsen Event.COMPLETE og Event.CANCEL, men jeg har lagt dem bare til testing. Vi setter opp en CANCEL-hendelse for når brukeren avbryter valgdialogen. Vi har:
Pass på at du oppretter alle hendelsesfunksjonene ellers får du en feilkompilering.
Vi fortsetter med blafunksjonen, utløses når velgeknappen er klikket. Vi må vise dialogboksen, slik at brukeren kan velge en fil:
Accentsconagua
offentlig funksjon bla gjennom (e: MouseEvent) filefilters = [new FileFilter ('Images', '* .jpg')]; // legge til andre filfiltre file.browse (filtre); Legg merke til at jeg har lagt til et FileFilter-objekt i en matrise og lagt til arrayet til FileReference bla metode. Du kan legge til en annen filtype ved å legge til et annet FileFilter-objekt med en annen utvidelse. Dette vil filtrere filtypene i valgdialogen, slik at brukeren bare kan velge riktige filtyper. Dette er bare et filnavn kontroll og kontrollerer ikke om bildefilen faktisk er et bilde.
Når brukeren har valgt en fil som skal lastes opp, utløses SELECT-hendelsen. Vi ringer nå FileReference laste opp() Metode for å laste opp filen til php-filen på serveren med URL-forespørselsargumentet.
privat funksjon selectHandler (e: Event) file.upload (req);
Les er opprettet funksjonen open_func. Denne funksjonen utløses når opplastingen starter. Vi vil skjule valgknappen og vise avbryt-knappen.
privat funksjon open_func (e: Event) cancel_btn.visible = true; select_btn.visible = false;
Lag fremdriftsfunksjonen:
privat funksjon progress_func (e: ProgressEvent) progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal; var tf = ny TextFormat (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% lastet opp';
La meg forklare hva som skjer her. Vi setter skalaen til barfilmen som viser prosenten lastet opp. Dette oppnås ved å dele bytesLoaded til bytesTotal egenskaper av hendelsesobjektet. Fremdriftshendelsen gir oss mengden opplastede byter og totalt byte av filen.
Deretter oppretter vi et TextFormat-objekt og setter fargen til svart (0x000000) for tekstetiketten. Vi trenger dette trinnet fordi senere endrer vi fargen på teksten til grønt eller rødt i henhold til meldingen.
Endelig setter vi tekstfeltets tekst med prosentandelen opplastet.
Vi lager feilfunksjonen:
privat funksjon io_error (e: IOErrorEvent) var tf = ny TextFormat (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen kunne ikke lastes opp.'; cancel_btn.visible = false; select_btn.visible = true;
I utgangspunktet endrer vi fargen på etikettteksten, angir den til en feilmelding og bytter deretter avbrytingen og velger knappene igjen.
La oss lage Vis melding funksjon som vil sjekke om opplastingen har vært vellykket:
privat funksjon show_message (e: DataEvent) var tf = ny TextFormat (); hvis (e.data == 'ok') tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen har blitt lastet opp.'; annet hvis (e.data == 'feil') tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen kunne ikke lastes opp.';
Her tester vi om dataegenskapen til UPLOAD_COMPLETE_DATA-hendelsen er "ok" eller "feil" og viser en melding på riktig måte. Dataegenskapen til denne hendelsen inneholder serverresponsen fra php-skriptet.
Dette er den siste funksjonen som vil bli utløst når avbryt-knappen klikkes. Dette kaller FileReference Avbryt() funksjon for å avbryte opplastingen. Vi ringer også tilbakestill () for å rydde opp.
privat funksjon cancelUpload (e: MouseEvent) file.cancel (); tilbakestille();
Vi utløser en tilbakestillingsfunksjon () for å rydde opp eiendelene, sette teksten til "" og bytte avbryt og velg knapper:
privat funksjon tilbakestilling () cancel_btn.visible = false; select_btn.visible = true; label_txt.text = "; progress_mc.bar.scaleX = 0;
Gå videre og test filen i Flash.
For øyeblikket fungerer opplastingen, men på slutten får vi feilmeldingen. Dette skyldes at vi ikke har oppgitt sti parameteren, så swf tar den hardkodede google siden. Siden den siden ikke returnerer oss 'ok', får vi feilen. Vi må bygge php-filen ...
La oss vise brukeren hastigheten han laster opp med. I konstruktørfunksjonen legger du til linjene:
tm = ny timer (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed);
Vi lager en tidtaker som kjører hvert sekund og vil sjekke hastigheten.
I funksjonen open_func () legger du til denne linjen:
tm.start ();
Dette vil starte timeren når opplastingen begynner. Vi lager nå metoden updateSpeed ():
privat funksjon updateSpeed (e: TimerEvent) speed = Math.floor ((currbytes - lastbytes) / 1024); lastbytes = currbytes;
Dette er hva som skjer her: Vi beregner hastigheten ved å trekke variabelen lastbytes fra currbytes. De lastbytes variabel er etterpå satt til currbytes. Så, når begge variablene er 0, er hastigheten 0. Currbytes-variabelen vil holde det nåværende antall byte lastet opp. Vi kan ikke få tilgang til dette direkte, derfor har vi opprettet variabelen currbytes. Denne variabelen settes fra vår PROGRESS-begivenhet der vi kan få tilgang til bytesLoaded-egenskapen.
Til slutt deler vi alt innen 1024 for å få resultatet i kilobytes og rundt verdien for visning med Math.floor ().
La oss legge til den siste endringen, slik at vi kan fortsette til php-skriptet. I fremdriften_func () endrer du linjen:
label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% lastet opp';
med dette:
label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% lastet opp' + fart + 'kb / s';
Her er den fulle koden for Flash-opplasteren:
pakke import Flash.display. *; importer Flash.events. *; importer Flash.text. *; importere Flash.net.FileReference; importer Flash.net.FileReferenceList; importer Flash.net.FileFilter; importere Flash.net.URLRequest; importer Flash.utils.Timer; importer Flash.events.TimerEvent; Public Class Uploader utvider MovieClip var fil: FileReference; var filtre: Array; var req: URLRequest; var tm: Timer; var hastighet: tall = 0; var currbytes: tall = 0; Var lastbytes: Nummer = 0; offentlig funksjon Uploader () req = ny URLRequest (); req.url = (stage.loaderInfo.parameters.f)? stage.loaderInfo.parameters.f: 'http://www.google.com'; fil = ny filreferanse (); oppsett (fil); select_btn.addEventListener (MouseEvent.CLICK, bla gjennom); progress_mc.bar.scaleX = 0; tm = ny timer (1000); tm.addEventListener (TimerEvent.TIMER, updateSpeed); cancel_btn.addEventListener (MouseEvent.CLICK, cancelUpload); cancel_btn.visible = false; offentlig funksjon bla gjennom (e: MouseEvent) filefilters = [new FileFilter ('Images', '* .jpg')]; // legge til andre filfiltre file.browse (filtre); privat funksjon oppsett (fil: 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); privat funksjon cancel_func (e: Event) spor ('kansellert!'); privat funksjon complete_func (e: Event) trace ('complete!'); privat funksjon io_error (e: IOErrorEvent) var tf = ny TextFormat (); tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen kunne ikke lastes opp.'; tm.stop (); cancel_btn.visible = false; select_btn.visible = true; privat funksjon open_func (e: Event) // trace ('opened!'); tm.start (); cancel_btn.visible = true; select_btn.visible = false; privat funksjon progress_func (e: ProgressEvent) progress_mc.bar.scaleX = e.bytesLoaded / e.bytesTotal; var tf = ny TextFormat (); tf.color = 0x000000; label_txt.defaultTextFormat = tf; label_txt.text = Math.round ((e.bytesLoaded / e.bytesTotal) * 100) + '% lastet opp' + fart + 'kb / s'; currbytes = e.bytesLoaded; privat funksjon selectHandler (e: Event) file.upload (req); privat funksjon show_message (e: DataEvent) tm.stop (); var tf = ny TextFormat (); hvis (e.data == 'ok') tf.color = 0x009900; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen har blitt lastet opp.'; annet hvis (e.data == 'feil') tf.color = 0xff0000; label_txt.defaultTextFormat = tf; label_txt.text = 'Filen kunne ikke lastes opp.'; privat funksjon updateSpeed (e: TimerEvent) speed = Math.round ((currbytes - lastbytes) / 1024); lastbytes = currbytes; privat funksjon cancelUpload (e: MouseEvent) file.cancel (); tilbakestille(); Tilbakestilling av privat funksjon () cancel_btn.visible = false; select_btn.visible = true; label_txt.text = "; progress_mc.bar.scaleX = 0; La oss bygge vår php script raskt:
Jeg vil bare oppsummere dette raskt (PHP er ikke strengt innenfor denne tutens omfang). Vi definerer en sti hvor vi skal sette filen, og vi kontrollerer om $ _FILES ['Filedata'] ['error'] er 0 (hvis det ikke er noen feil). Vi kontrollerer da om move_uploaded_file () har overført filen i mappen, og vi viser "ok" eller "feil" avhengig av resultatet.
Ett siste punkt: Du må sørge for at mappen eksisterer og den kan skrives før du kjører skriptet.
Dette er slutten av vår opplæring. Takk for at du leser, jeg håper du lærte noe!
