5. Upload

Posted Dom, 11/30/2008 - 11:51 by Francesco Casula

In questo capitolo analizzeremo il codice ActionScript 3 che comporrà la classe di principale della nostra applicazione.

La classe documento in questione l'ho chiamata Upload, e ne riporto di seguito gli attributi :

  • browse (Button) - elemento dell'interfaccia che rappresenterà il bottone "Sfoglia";
  • status (TextField) - elemento dell'interfaccia che rappresenterà un campo di testo in cui verranno riportati gli stati dell'applicazione ed eventuali errori;
  • phpserv (PhpService) - istanza utilizzata per contattare gli script PHP una volta avvenuto l'invio del file;
  • fileRef (FileReference) - istanza utilizzata per inviare il file al server designato.

Procediamo ora analizzando il codice di tutti i metodi della classe :

  • Upload():void - costruttore della classe, inizializza l'attributo fileRef e il membro statico PhpService.scriptPath assegnandolo al percorso specificato nella classe Settings, inoltre richiama il metodo interfaccia() che vedremo subito dopo e infine aggiunge tutti i listener necessari al membro fileRef, per gestire le varie situazioni che possono verificarsi durante il tentativo di invio del file al server. 
public function Upload():void
{
	PhpService.scriptPath = Settings.PHP_PATH;

	this.interfaccia();

	this.fileRef = new FileReference();
	this.fileRef.addEventListener(Event.SELECT, this.selectHandler);
	this.fileRef.addEventListener(Event.COMPLETE, this.completeHandler);
	this.fileRef.addEventListener(IOErrorEvent.IO_ERROR, this.ioErrorHandler);
	this.fileRef.addEventListener(ProgressEvent.PROGRESS, this.progressHandler);
	this.fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, this.httpStatusHandler);
	this.fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, this.securityHandler);
}

  • interfaccia():void - inizializza e configura i due membri browse e status dandogli la formattazione adeguata e li aggiunge infine al filmato contenitore attraverso il metodo addChild(). 
private function interfaccia():void
{
	// Bottone Sfoglia
	this.browse = new Button();
	this.browse.x = 10;
	this.browse.y = 30;
	this.browse.width = 50;
	this.browse.height = 20;
	this.browse.label = "Sfoglia";
	this.browse.addEventListener(MouseEvent.CLICK, this.browseClick);
	this.addChild(this.browse);

	// Campo di testo Status
	var format:TextFormat = new TextFormat("Verdana", 10, "0x000000");

	this.status = new TextField();
	this.status.x = 10;
	this.status.y = 10;
	this.status.width = 200;
	this.status.height = 16;
	this.status.border = true;
	this.status.defaultTextFormat = format;
	this.status.text = "Nessun file selezionato.";
	this.addChild(this.status);
}

  • browseClick(evt:MouseEvent):void - listener che gestisce i click sul bottone browse.
    Nel caso in cui l'etichetta del bottone sia impostata su "Sfoglia" tenta di aprire una finestra di dialogo per sfogliare i file sul disco rigido dell'utente attraverso il metodo browse() dell'istanza fileRef, se invece l'etichetta è impostata su "Invia" tenta di inviare il file precedentemente selezionato tramite il metodo upload() dell'istanza fileRef. 
private function browseClick(evt:MouseEvent):void
{
	if (this.browse.label == "Sfoglia")
	{
		try
		{
			this.fileRef.browse(Settings.ALLOWED_TYPES);
		}
		catch (error:Error)
		{
			this.status.text = "Impossibile sfogliare il disco rigido.";
		}
	}
	else if (this.browse.label == "Invia")
	{
		this.browse.enabled = false;
		this.status.text = "Invio in corso ...";
		var request:URLRequest = new URLRequest(Settings.PHP_PATH + "upload.php");

		try
		{
			this.fileRef.upload(request);
		}
		catch (error:Error)
		{
			this.browse.enabled = true;
			this.status.text = "Impossibile inviare il file.";
		}
	}
}

  • checkUpload(evt:Event):void - più avanti vedremo il codice del listener completeHandler(), il cui compito sarà quello di utilizzare la classe PhpService per contattare il servizio php verify.php.
    Il risultato ottenuto da quest ultimo script verrà gestito appunto dal metodo checkUpload. 
private function checkUpload(evt:Event):void
{
	this.browse.enabled = true;
	this.browse.label = "Sfoglia";

	if (Boolean(parseInt(this.phpserv.response.success)))
		this.status.text = "File inviato con successo.";
	else
		this.status.text = "Il file non è stato accettato.";

	trace(this.phpserv.response.log);
}

  • Di seguito riporto tutti gli altri metodi, ossia i listener che si limiteranno a riportare le informazioni raccolte attraverso il campo di testo status.
 

/* Gestori degli eventi */
private function selectHandler(evt:Event):void
{
	this.browse.label = "Invia";
	this.status.text = evt.target.name;
}

private function completeHandler(evt:Event):void
{
	this.status.text = "File \"" + evt.target.name + "\" inviato, verifica in corso ...";

	this.phpserv = new PhpService("verify.php");
	this.phpserv.addVar("filename", evt.target.name);
	this.phpserv.addEventListener(Event.COMPLETE, this.checkUpload);
	this.phpserv.request();
}

private function ioErrorHandler(evt:IOErrorEvent):void
{
	this.status.text = "Errore di Input/Output : " + evt;
}

private function progressHandler(evt:ProgressEvent):void
{
	var pc:uint = evt.bytesLoaded * 100 / evt.bytesTotal;
	this.status.text = "Invio in corso ... ";
	this.status.appendText(String(pc) + "%");
}

private function httpStatusHandler(evt:HTTPStatusEvent):void
{
	this.status.text = "Errore HTTP : " + evt;
}

private function securityHandler(evt:SecurityErrorEvent):void
{
	this.status.text = "Violazione della sicurezza : " + evt;
}

Si conclude qui questo tutorial, spero utile.
Potete scaricare l'intero codice d'esempio da qui.

Per far si che tutto funzioni correttamente, ricordatevi di modificare i permessi alle cartelle "php" per la scrittura del file di log e alla cartella "upload" per l'archiviazione dei file.

AllegatoDimensione
upload.zip286.66 KB