tutorial uploaden met flash.

uploaden met flash.

_{door vinTage op 18-03-2007}

Om deze tutorial te begrijpen is een basis kennis van flash mooi meegenomen.

In deze tutorial ga ik jullie uitleggen hoe je upload via flash en:
* hoe je kan bepalen welke bestanden er geupload mogen worden
* hoe je bestands informatie kan ophalen
* hoe je toont hoever de upload al gedaan is
* wat je kan doen als de upload gedaan is
* een hele simpele php uploadcode gebruikt

En dit gaan we maken.

Met behulp van de FileReference class is flash in staat om allerlei informatie op te vragen van het bestand wat je wilt uploaden.
Deze informatie kunnen we dan weer koppelen aan een paar functies en zo bijvoorbeeld een laadbalk tonen die onze upload weergeeft.

Bladeren in speciefieke bestands typen

Laten we dus maar beginnen bij het begin en eerst eens zorgen dat we het bladerscherm te zien krijgen.
Om te beginnen moeten we bepalen welke bestanden er te zien zijn tijdens het bladeren.
Deze bestanden moeten via een array in het bladerscherm gezet worden.

Onderstaande actionscript staat ons toe te bladeren via een klik op een knop met de instancenaam selecteerBestand.

actionscript code

import flash.net.FileReference;

//de array waar de toegestane bestands types instaan

var bestandTypes:Array = new Array();

//bovenstaande array vullen met toegestane bestanden

//images

var imageTypes:Object = new Object();

imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";

imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";

bestandTypes.push(imageTypes);

//flash

var flashMeuk:Object = new Object();

flashMeuk.description = "flash Files (*.swf, *.fla)";

flashMeuk.extension = "*.swf;*.fla";

bestandTypes.push(flashMeuk);

//alle bestanden

/*

var alles:Object = new Object();

alles.description = "alle bestanden (*.*)";

alles.extension = "*.*";

bestandTypes.push(alles);

*/

//class aanspreken

var fileRef:FileReference = new FileReference();

//button

selecteerBestand.onRelease = function() {

  fileRef.browse(bestandTypes);

};

Flash voorbeeld

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.

Gegevens opvragen van het geselecteerde bestand

Zoals al gezegd kan je met de FileReference class en hele hoop informatie opvragen.
Via een listener kunnen we dus zo ook een aantal controles uitvoeren.
We gaan dus flash een aatal controles laten uitvoeren zodra er een bestand is geselecteerd dmv listener.onSelect.

actionscript code

uploadKnop._visible=false;

//een listener aanmaken waarmee we allerlei gegevens kunnen opvragen

var listener:Object = new Object();

listener.onSelect = function(file:FileReference) {

  //bestand is te groot

  if (file.size>1048576) { //1048576 bytes is 1 MB

    trace('maximaal toegestane bestandsgrote is één MB');

  } 

  //fout bestandstype 

  else if (file.type.toLowerCase() != ".jpg") {

    trace("alleen jpg mag ge-upload worden");

  } 

  //alles is goed, dus doorgaan met verwerken

  else {

    uploadKnop._visible = true;

    //op onderstaande kan je controleren via de FileReference

    trace("Aantal bytes: "+file.size);

    trace("Bestands naam: "+file.name);

    trace("Bestands type :"+file.type);

    trace("Gemaakt op: "+file.creationDate);

    trace("Gemaakt door: "+file.creator);

    trace("Laatst veranderd op: "+file.modificationDate);

  } 

};

fileRef.addListener(listener);

Flash voorbeeld

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.

Uploaden

Het uploaden is eigenlijk niet meer dan connectie leggen naar een php bestand via file.upload()

actionscript code

//upload knop en upload progres balk onzichtbaar maken

uploadKnop._visible = false;

progresBalk.balk._visible = false;

progresBalk.balk._xscale = 0;

//een listener aanmaken waarmee we allerlei gegevens kunnen opvragen

var listener:Object = new Object();

listener.onSelect = function(file:FileReference) {

  //bestand is te groot

  if (file.size>1048576) {

    //1048576 bytes is 1 MB

    info.htmlText = "maximale bestandsgrote 1 MB";

  } else if (file.type.toLowerCase() != ".jpg") {

    info.htmlText = "alleen jpg mag ge-upload worden";

  } else {

    uploadKnop._visible = true;

    uploadKnop.onRelease = function() {

      //het gaat fout

      if (!file.upload("upload.php")) {    

        info.htmlText = "upload script niet gevonden.";

        /*Dit komt omdat je de swf niet online bekijkt 

        via een php enabled server.

        Of anders bestaat upload.php gewoon echt niet.

        */

      } 

      //het gaat goed dus...

      else {

        progresBalk.balk._visible = true;

        //dadelijk laten we deze werken

      }

    };

  }

};

fileRef.addListener(listener);

Tijdens het uploaden

We kunnen nu de bezoeker een beetje up to date houden door de uploadbalk te laten groeien of eventuele andere informatie te tonen.
Dit is te verwezelijken door onProgress te gebruiken.

actionscript code

listener.onProgress = function(file:FileReference, bytesLoaded, bytesTotal){  

  //procenten tonen hoeveel er al is ge upload

  info.htmlText = "Gedaan "+Math.round(bytesLoaded/bytesTotal*100)+"% van "+file.size;

  //balk in laadBalk laten groeien

  progresBalk.balk._xscale = bytesLoaded/bytesTotal*100;

};

Als de upload gedaan is

Met listener.onComplete kunnen we weer andere acties uitvoeren die de bezoeker erop attendeert dat de upload gedaan is.

actionscript code

listener.onComplete = function(file:FileReference){

  info.htmlText = file.name+" is compleet ge-upload.<br>";

  info.htmlText += "Hier kan je eventueel een link tonen naar het bestand"

  progresBalk.balk._visible = false;

  uploadKnop._visible = false;

}

Nu hebben we ongeveer het belangrijkste flash gedeelte behandeld.
Hieronder post ik nog een keer een complete code, maar de tutorial is nog niet gedaan, want er moet nog een stukje serverside worden afgehandeld.

Kant en klare flash upload code

actionscript code

import flash.net.FileReference;

info.html = true;

var bestandTypes:Array = new Array();

var imageTypes:Object = new Object();

imageTypes.description = "Images (*.jpg)";

imageTypes.extension = "*.jpg;";

bestandTypes.push(imageTypes);

var fileRef:FileReference = new FileReference();

selecteerBestand.onRelease = function() {

  fileRef.browse(bestandTypes);

};

//upload knop en upload progres balk onzichtbaar maken

uploadKnop._visible = false;

progresBalk.balk._visible = false;

progresBalk.balk._xscale = 0;

//een listener aanmaken waarmee we allerlei gegevens kunnen opvragen

var listener:Object = new Object();

listener.onSelect = function(file:FileReference) {

  //bestand is te groot

  if (file.size>1048576) {

    //1048576 bytes is 1 MB

    info.htmlText = "maximale bestandsgrote 1 MB";

  } else if (file.type.toLowerCase() != ".jpg") {

    info.htmlText = "alleen jpg mag ge-upload worden";

  } else {

    uploadKnop._visible = true;

    info.htmlText = "Bestands naam: "+file.name+"<br>";

    info.htmlText += "Bestands grote: "+file.size+"<br>";

    info.htmlText += "Extentie: "+file.type+"<br><br>";

    info.htmlText += "<b>klik de upload knop om te uploaden.</b>";

    uploadKnop.onRelease = function() {

      //het gaat fout

      if (!file.upload("upload.php")) {    

        info.htmlText = "upload script niet gevonden.";

        /*Dit komt omdat je de swf niet online bekijkt 

        via een php enabled server.

        Of anders bestaat upload.php gewoon echt niet.

        */

      } 

      //het gaat goed dus...

      else {

        progresBalk.balk._visible = true;

        //dadelijk laten we deze werken

      }

    };

  }

};

//uploaden is bezig

listener.onProgress = function(file:FileReference, bytesLoaded, bytesTotal){  

  //procenten tonen hoeveel er al is ge upload

  info.htmlText = "Gedaan "+Math.round(bytesLoaded/bytesTotal*100)+"% van "+file.size;

  //balk in laadBalk laten groeien

  progresBalk.balk._xscale = bytesLoaded/bytesTotal*100;

};

//klaar met uploaden

listener.onComplete = function(file:FileReference){

  info.htmlText = file.name+" is compleet ge-upload.<br>";

  info.htmlText += "<a href='#pad_naar_bestand'><u>klik om te bekijken</u></a>"

  progresBalk.balk._visible = false;

  uploadKnop._visible = false;

}

//listener aan de ref hangen

fileRef.addListener(listener);

flash voorbeeld

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.

php

Flash is clientside en uploaden serverside, dus we hebben nog een stukje php nodig.
Onderstaande scriptje plaatst het bestand in een map genaamd "uploads".
Let op dat die map ook de juiste chmod krijgt zodat er wel daadwerkelijk geupload kan worden.
chmod 777 werkt altijd, maar is niet de veiligste instelling, experimenteer hier wat mee of vraag het je host.

php code

<?php

if ($_FILES['Filedata']['name']) //Filedata is de default naam

 {

   $nieuweLocatie = 'uploads/'.$_FILES['Filedata']['name'];

   move_uploaded_file($_FILES['Filedata']['tmp_name'], $nieuweLocatie);

   chmod ('uploads/'.$_FILES['Filedata']['name'] , 0644);

 }

?>

Nawoordje

Flash neemt hier het gros van de controles op zich, maar als er iemand zo leuk is om je swf te kraken, dan kan hij zo de url van je upload.php achterhalen en via een eigengemaakt formulier mega foute/grote etc bestanden uploaden.
Daarom raad ik je aan om toch een php backend controle te doen.
Deze controle hoeft niets te routeneren, want normaal gezien zou er geen probleem moeten zijn.

Tot zo ver deze tutorial over het uploaden via flash, natuurlijk heb ik een zip file ter beschikking waar alle werkende bestanden instaan voor het geval je ergens vastloopt.

Download upload bestanden ( domme link he :p )

In deze upload via flash tutorial heb ik alleen de basis behandeld waarmee je een leuk upload dingetje kan maken.
Er zijn echter nog wel een paar functies aangaande de FileReference class, hierover kan je bij de livedocs terecht

regards vinTage

Share |

Stem op deze tutorial

Reacties

Je bent niet ingelogged, je kan geen commentaar geven, of commentaren lezen over deze tutorial.