| |||
| Vamos estudar hoje uma classe no Flash muuuuito útil: FileReference. A maneira mais rápida e prática de fazer upload de arquivos usando o Flash. Após seu entendimento, vamos integrar o envio com PHP e MySQL para gravar o arquivo no banco de dados. Mãos à obra!! Na parte I veremos como funcionam os códigos no Flash e na parte II como integrar o Flash com PHP e MySQL. PARTE IPara começar a usar a class, você precisa importá-la para o Flash. Para isso use o seguinte comando:import flash.net.FileReference; Agora nós precisamos criar uma variável do tipo FileReference e uma do tipo object para servir de Listener para a class. var fileRef:FileReference = new FileReference(); var listener:Object = new Object(); fileRef.addListener(listener); Linha 1 - Cria a variável responsável pela FileRefrence Linha 2 - Cria o Object que servirá como Listener para class. Linha 3 - Atribui o Listener à class. Agora o que você precisa definir, são os tipos de arquivos aceitos. Isso é feito por um Array com os formatos aceitos. Vamos aceitar arquivos do tipo texto e imagem. Primeiro vamos criar o Array para todos os tipos aceitos: var allTypes:Array = new Array(); Criamos o array responsável pelos formatos aceitos no upload. Agora vamos criar o object para imagens e para texto declarando os tipos aceitos: var imageTypes:Object = new Object(); imageTypes.description = "Imagens (*.jpg, *.jpeg, *.gif, *.png)"; imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png"; var textTypes:Object = new Object(); textTypes.description = "Arquivos de texto (*.txt, *.pdf, *.doc)"; textTypes.extension = "*.txt; *.pdf; *.doc"; Linha 1 - Novo Object para atribuir os formatosLinha 2 - Descrição dos formatos aceitos (visível quando abrir a “janelinha” de upload)Linha 3 - Formato dos arquivos aceitos E agora vamos adicionar os dois no Array “allTypes” que fica responsável para declarar todos os formatos aceitos. allTypes.push(imageTypes); allTypes.push(textTypes); Atribuir ao array allTypes, os formatos aceitosVamos agora conhecer os eventos da class.Os mais usados, que vamos ver aqui, são: onSelect() – Ao selecionar o arquivo... onCancel() – Ao cancelar a seleção... onOpen() – Ao abrir o arquivo... onProgress() – Enquanto estiver enviando...(para fazermos o preload do envio) onComplete() – Ao completar o envio... onHTTPError() – Erros HTTP(404,505,...) onIOError() – Para erros de Input e Output, como protocolos, password, ... onSecurityError() – Erros de Segurança E os métodos: browse() - Abrir a “janelinha” de upload upload() – Fazer upload do arquivo Agora vamos fazer isso tudo funcionar, isso tudo se integrar. Quem controlará tudo, será o listener, então quando for usar um método, será sempre assim: listener.método = function(file:FileReference):Void { //ações }A variável file do tipo FileReference declarada na função servirá para pegarmos as informações do arquivo selecionado. Para começarmos a fazer nosso sisteminha de upload, crie dois botões e uma caixa de texto dinâmico. Um botão para “abrir foto...” e outro “enviar foto...”. Instancie-os como: “abrir” e “enviar” (ambos sem aspas). E a caixa de texto dinâmica instancie-a de “caixa” (sem aspas). Vamos programar agora. Obs: o atributo file.name pega o nome do arquivo selecionado. listener.onSelect = function(file:FileReference):Void { caixa.text = file.name + “ selecionado”; } Exibe na caixa de texto o nome do arquivo selecionado. listener.onCancel = function(file:FileReference):Void { caixa.text = "Cancelado"; } Cancela o upload. listener.onOpen = function(file:FileReference):Void { caixa.text = "onOpen: " + file.name; } Quando iniciar o envio... listener.onProgress = function(file:FileReference, bytesLoaded:Number, bytesTotal:Number):Void { caixa.text = "Carregando Imagem: " + file.name + “ - ” + Math.round((bytesLoaded/bytesTotal)*100) + "%"; } Vamos exibir na caixa de texto a porcentagem do envio listener.onComplete = function(file:FileReference):Void { caixa.text = file.name + " enviado com sucesso."; } Exibe na caixa de texto uma mensagem de sucesso quando envio for completado. listener.onHTTPError = function(file:FileReference, httpError:Number):Void { caixa.text = "onHTTPError: " + httpError + " - " + file.name; } Caso ocorra um erro http, exibe na caixa o nome do erro e o nome do arquivo selecionado. listener.onIOError = function(file:FileReference):Void { caixa.text = "onIOError: " + file.name; } Exibe na caixa que houve um erro IO ( Input / Output ) listener.onSecurityError = function(file:FileReference, errorString:String):Void { status = "onSecurityError: " + file.name + " errorString: " + errorString; } Exibe na caixa que houve um erro de Segurança e mostra o erro. Finalizamos os eventos da class, agora precisamos criar os métodos. Nossos botões vão servir para abrir a janela de seleção de arquivo e para enviar o arquivo. abrir.onRelease = function():Void { fileRef.browse(allTypes); } enviar.onRelease = function():Void { fileRef.upload("upload.php?nomeArtista="+nomeArtista+"&idade="+idade+"&cidade="+cidade); } O primeiro botao abrirá a janela de upload e definará os tipos aceitos para upload, de acordo com o array allTypes. O segundo botão ficará responsável ao envio do arquivo, para uma página PHP, junto com 3 variáveis que eu decidi criar: Nome, Idade e Cidade, que servirão para o cadastro no MySQL. A primeira parte do tutorial está terminada, na próxima vamos integrar isso com o nosso banco de dados. Veja como ficará nossa aplicação (ainda sem o PHP): http://www.rafaelcosta.com/Tutoriais/FileReference.html Click aqui para baixar o arquivo fonte: http://www.rafaelcosta.com/Tutoriais/FileReference.fla Abraços, até a próxima. |
Categories:
Tutoriais