Flash tiptrik – upload souborů na server
2.8.2007· Autor: Ondřej Brichta·
Počet komentářů: 5
V dnešním článku se podíváme na důležitou část některých aplikací, kterou je upload souborů na server. Řešení bude pro ActionScript 3.0 s využitím PHP skriptu.
FileReference třída
Upload souborů na server patří mezi žádané kroky v aplikacích, kde uživatel nahrává svoje fotografie, pracuje v CMS systému nebo jiné aplikaci, kde je nutné sdílet svá data.
Od flashplayeru verze 8 můžeme využívat třídu FileReference, pomocí které lze upload a download souborů provádět i ze samotné flashové aplikace. Samotná třída umožňuje zobrazení dialogového okna, které nás vyzve k výběru souboru, který chceme nahrát na server (v případě stahování se zobrazí okno s možností výběru uložení souboru).
Jediné, co musíme na straně flashové aplikace udělat, je spuštění metody „upload", která se postará o zobrazení okna výběru souboru a o následné odeslání dat na server. Na straně serveru musíme mít přichystaný skript, který zaslaná data uloží do souboru. V naší ukázce si představíme řešení s využitím ActionScriptu 3.0 a PHP „skriptu" na straně serveru.
Upload souboru
To, že slovo skript v předchozím odstavci je v uvozovkách, není překlep, samotný PHP soubor, který převezme zaslaná data a uloží je na serveru tak, jak jsme je odeslali (bez jakékoliv kontroly velikosti), má totiž tuto podobu:
<?php
move_uploaded_file($_FILES['Filedata']['tmp_name'], "./temp/".$_FILES['Filedata']['name']);
?>
Ze strany flashové aplikace převezme ve „Filedata" data zaslaného souboru a uloží je pod stejným názvem do adresáře „temp" (tento adresář musí již existovat).
Na straně flashové aplikace pak připravíme funkce pro výběr a odeslání souboru na server:
var imageTypes:FileFilter = new FileFilter("Obrazky (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
var allTypes:Array = new Array(imageTypes);
var fileRef:FileReference = new FileReference();
//listenery udalostí
fileRef.addEventListener(Event.CANCEL, cancelHandler);
fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
fileRef.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
fileRef.addEventListener(Event.OPEN, openHandler);
fileRef.addEventListener(ProgressEvent.PROGRESS, progressHandler);
fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadCompleteDataHandler);
var uploading_file:String = "";
function selectHandler(e:Event):void {
var file:FileReference = FileReference(e.target);
var req:URLRequest = new URLRequest("upload.php");
uploading_file = file.name;
try {
fileRef.upload(req);
} catch (error:Error) {
trace("Nelze nahrat soubor");
}
}
function cancelHandler(e:Event):void {
trace("Výběr souboru byl zrušen");
}
function uploadCompleteDataHandler(e:Event):void {
trace("Soubor byl nahrán na server");
loadFile("temp/"+uploading_file);
}
function httpStatusHandler(e:HTTPStatusEvent):void {
trace("Chyba v nahravaní");
}
function ioErrorHandler(e:IOErrorEvent):void {
trace("Chyba v zápisu souboru");
}
function openHandler(e:Event):void {
trace("Start nahravaní");
}
function progressHandler(e:ProgressEvent):void {
var proc:Number = Math.round((e.bytesLoaded/e.bytesTotal)*100);
trace("Nahráno: "+proc+"% dat");
}
function securityErrorHandler(e:SecurityErrorEvent):void {
trace("Nahrávání není povoleno");
}
function doUpload():void {
try {
var success:Boolean = fileRef.browse(allTypes);
} catch (error:Error) {
trace("Nelze provést výběr souboru");
}
}
var img:Loader;
function loadFile(file:String):void {
img = new Loader();
var url:String = file;
var urlReq:URLRequest = new URLRequest(url);
img.load(urlReq);
addChild(img);
}
doUpload();
Při uploadu souborů na server máme možnost filtrovat typy souborů, které chceme povolit k nahrávání. Využíváme k tomu třídu FileFilter, která nám umožňuje nastavit filtr pro konkrétní typy souborů.
Pro zobrazení dialogového okna výběru souborů použijeme metodu „browse" (funkce doUpload), jejímž parametrem je pole filtrů souborů, které jsme si vytvořili. U funkce „doUpload" ještě zůstaneme, všimneme si příkazu try ... catch, kterým máme možnost reagovat na případnou chybu v příkazu, který je uveden v části „try".
Vraťme se ale zpět k FileReference třídě. Po vytvoření objektu „fileRef" této třídy následuje konfigurace řady listenerů událostí, které se mohou během uploadu vyskytnout. Určitě bychom měli detekovat událost „SELECT", která nastane v okamžiku výběru souboru a potvrzení tlačítkem OK (nebo Otevřít).
Uvedenou událost detekujeme funkcí „selectHandler", která po výběru souboru zajistí jeho odeslání na server pomocí metody „upload". Parametrem této metody je objekt třídy „URLRequest" a jedná se o název souboru, který data na straně serveru zpracuje. V našem případě se jedná o php soubor.
Další událost, kterou budeme určitě používat je „PROGRESS", která představuje stav nahrávání dat na server. My jí detekujeme pomocí funkce „progressHandler" ve které zjišťujeme stav načtení souboru na server. Využíváme přitom vlastnosti „bytesLoaded" a „bytesTotal" objektu události.
Kromě událostí detekující neúspěšné načtení dat „IO_ERROR", „SECURITY_ERROR" a „HTTP_STATUS" zde máme ještě jednu důležitou událost, kterou je úspěšné načtení dat na server: „UPLOAD_COMPLETE_DATA". Ve funkci: „uploadCompleteDataHandler" pak spustíme další funkci „loadFile", která zajistí načtení nahraného souboru a jeho zobrazení ve flashové aplikaci.
Zdrojové soubory jsou ke stažení zde: data.zip
Ondřej Brichta Vývojář multimediálních aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server
Web:
http://www.obria.cz
|
Motto: <°))))><
Seriál:
Tipy a triky
Tipy a triky je seriál zaměřený na zajímavá řešení a vylepšení flashových aplikací