Nesse artigo quero mostrar como usar as classes FileReferenceList e FileReference para fazer o upload de múltiplos arquivos com Flash. Neste pequeno tutorial usei PHP como linguagem server-side.
Na comunidade do orkut pediram para falar sobre a classe FileReference. Como às vezes temos um fim de semana completamente livre resolvi explicar um pouco sobre ela. Para ficar mais fácil o entendimento decidi fazer um mini tutorial.
Na stage precisamos ter:
- Um botão com a instância search
- Um campo de texto com a instância status
- Uma barra de progresso com a instância bar
Crie um arquivo *.as chamado Main.as.
Importando as classes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | package { import flash.display.Sprite; import flash.events.DataEvent; import flash.events.IOErrorEvent; import flash.events.ProgressEvent; import flash.net.FileReference; import flash.net.FileReferenceList; import flash.events.Event; import flash.events.MouseEvent; import flash.net.FileFilter; import flash.net.URLRequest; public class Main extends Sprite { |
Declarando as variáveis
Vamos declarar quatro variáveis, todas explicadas nos comentários.
1 2 3 4 5 6 7 8 | //Classe necessária para selecionarmos múltiplos arquivos private var fileList:FileReferenceList = new FileReferenceList(); //Criamos um filtro para somente permitir o upload de imagens private var filter:FileFilter = new FileFilter("Imagens", "*.jpg; *.gif; *.png; *.jpeg"); //Mais tarde entenderão o por quê desse array private var files:Array; //Será a nossa base, com ela saberemos qual imagem devemos fazer o upload. private var current:uint; |
Função Main()
Adicionamos um ouvinte ao search e também setamos o scaleX da nossa barra como 0
1 2 3 4 | public function Main():void { search.addEventListener(MouseEvent.CLICK, openBrowse); bar.scaleX = 0; } |
Função openBrowse()
Através do método browse() será aberta uma janela para podermos procurar os nossos arquivos. Como parâmetro criamos um array com o objeto FileFilter. Quando clicarmos no botão Abrir será disparado o evento SELECT.
1 2 3 4 | private function openBrowse(event:MouseEvent = null):void { fileList.browse(new Array(filter)); fileList.addEventListener(Event.SELECT, startUpdate); } |
Função startUpdate()
Em event.target temos o nosso FileReferenceList. Essa classe tem a propriedade fileList, nessa propriedade ficam armazenados os nossos arquivos. Caso dermos um trace do tipo: event.target.fileList[0] iremos ter como retorno um objeto do tipo FileReference. Confuso? Vamos ver isso funcionando para ficar mais claro.
1 2 3 4 5 | private function startUpdate(event:Event):void { files = event.target.fileList; // Essa função irá enviar cada arquivo sendFile(0); } |
Função sendFile()
Primeiro pegamos o objeto FileReference pelo índice do array files.
Através desse índice criamos uma variável, assim podemos minupulá-lo de uma maneira bem fácil. Adicionamos os ouvintes e no método upload() dizemos a url do nosso script PHP. Também setamos a variável current com o valor de i.
1 2 3 4 5 6 7 8 | private function sendFile(i:uint):void { var file:FileReference = files[i] as FileReference; file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, completeUpload); file.addEventListener(ProgressEvent.PROGRESS, progressFile); file.addEventListener(IOErrorEvent.IO_ERROR, hasError); // URL do script PHP, abaixo um exemplo ilustrativo file.upload(new URLRequest("http://www.flashpedia.com.br/upload/upload.php")); } |
Função completeUpload()
Eu pulei as outras funções pois elas não são tão importantes, caso queira o source completo faço o download no fim do tutorial.
Eu incremento a variável current e verifico se todos os arquivo já foram enviados. Caso ainda não tenham sido enviados em envio o próximo, caso contrário exibi uma mensagem no campo status.
1 2 3 4 | private function completeUpload(event:DataEvent):void { current ++; current < files.length ? sendFile(current) : status.text = "Todos os arquivos foram enviados"; } |
O script PHP
O Flash por si só não conseguirá fazer o upload de uma forma desejada. Precisaremos de um script sever-side para manipular esse arquivo. No exemplo eu fiz com PHP, quero ressaltar que fiz um exemplo simples.
Basicamente usamos a função move_uploaded_file() para mover o arquivo. O primeiro parâmetro é a atual posição do arquivo e no segundo o local onde o arquivo deve ser movido.
Exemplo documentado:
1 2 3 4 5 6 7 8 9 10 | <?php //É padrão do Flash enviar o arquivo com o nome "Filedata" $file = $_FILES['Filedata']; //Lugar onde iremos salvar o nosso arquivo $url = "images/" . $file['name']; //Função que move o arquivo para o local especificado move_uploaded_file($file['tmp_name'], $url); ?> |
Faça o download
Exempo de Upload
Baixado 585 vezes
Tamanho 8.94 KB
Sinta-se livre para postar um comentário seja ele negativo ou positivo. Afinal estamos aqui para interagir um com os outros.
em 23 de setembro de 2009
Exelente matéria. Valeu cara!
em 24 de setembro de 2009
aaaagora eu sei do que era que cês tavam falando no group..
;p
gostei cara, bem explicativo. Se me perguntarem agora, este teu artigo me poupará alguns minutos explicando… ^^
bons estudos ai!
em 7 de outubro de 2009
Como eu faria para passar um parâmetro do HTML para a URL que será chamada?
Por exemplo, para que a url chamada fosse /upload.php?param=value¶m=value…
Valeu
em 17 de outubro de 2009
No método upload basta colocar:
file.upload(new URLRequest(“http://url.com.br/upload/upload.php?param=value¶m=value));
em 20 de outubro de 2009
Gostario de saber se alguem pode postar o arquivo upload.zip de novo.
aquele esta dando erro.
abraço
em 20 de outubro de 2009
Já vou corrigir isso Ricardo, obrigado pelo FeedBack.
Alguns arquivos estão realmente com problemas para abrir ou descompactar, não sei dizer o porque, é do plugin de download.
em 20 de outubro de 2009
valeu cara.. :D
e parabéns pelo site e pela atenção aos usuarios!
em 1 de novembro de 2009
Marcelo, não sei se voce sabe tambem php, mas tem como criar miniatura de cada imagem? :S
Obrigado!
em 18 de novembro de 2009
Opa cara usei teu exemplo, e to com um problema, pode me ajudar?
em vez de usar as pagina php, to usando uma asp upload.asp
dai na hora q vo testar, seleciono duas imagens clico em enviar e ele envia soh a última selecionada e nao aparece a mensagem “Todos os arquivos foram enviados”
fica na ultima mensagem “Enviando arquivo = blblalba.jpg”
pode me ajudar? meu msn eh o mesmo do e-mail
em 23 de novembro de 2009
O problema do Edward Krueger era com o arquivo asp
em 2 de maio de 2010
Olá, muito boa matéria, consegui fazer direitinho, só um problema que estou tendo.
A pasta images, eu salvo no mesmo diretório do arquivo upload.php dentro do ftp, no primeiro momento a imagem ficou enviando, e não saiu desse aviso, depois eu mudei o nome tmp_name, e apareceu que foi enviado!, só que não salvou a imagem na pasta interna do ftp.
vcs Tem alguma solução?
Obrigado.
em 15 de junho de 2010
Olá, primeiro desejo agradecer muito sua ajuda o tutorial funcionou perfeito em “quase” todos os tipos de arquivos.
Não consegui enviar arquivos do tipo vídeo. O que é necessario de ser feito para adapatar as funcionalidades do script para eu poder utiliza-lo tambem em arquivos de vídeo grandes? (Aprox. 60mb).
Ressaltando: Todos os tipos de imagens, texto (txt) funcionaram, só nao consegui fazer upload de arquivos de vídeo.
Desde já agradeço à preciosa ajuda.
em 23 de junho de 2010
Só uma pergunta: tentou enviar um arquivo de vídeo bem pequeno? (cerca de 2MB)