Como fazer uploads de arquivos utilizando FileRefernece

Publicado em: 02/10/2007  |  Flash  |  Visualizações: 2.477  |  3 Comentário(s)

Esse é um recurso muito interessante do Flash que possibilita enviar arquivos para um servidor diretamente da apresentação, tornando desnecessária a utilização de forms em HTML, a classe FileReference pode ser utilizada tanto para upload quanto download de arquivos através do flash.

Restrições:
Ao utilizar a FileRefence é preciso lembrar das políticas de segurança do Flash, como a restrição quanto ao acesso de outros servidores pelo Flash. Essas políticas se aplicam aos dados enviados utilizando FileReference. Caso você tente acessar ou enviar algum arquivo que não esteja no mesmo domínio que a apresentação Flash, será gerado um erro de segurança e a operação será cancelada. Por isso é preciso tomar cuidado com onde a sua aplicação irá rodar e como você se referenciará aos arquivos no servidor, por exemplo. Se eu tiver uma apresentação que eu acesso pelo endereço:
"http://www.meudominio.com.br/oficina/app.swf"
e nessa apresentação eu tento chamar um arquivo utilizando o endereço: "http://meudominio.com.br/oficina/arquivos/exemplo.jpg"
irá gerar um erro de segurança. Apesar dos arquivos estarem no mesmo servidor o Flash irá considerá-lo diferente e não permitira o acesso a ele.

Os Eventos:
É através dos listeners que iremos controlar todo o processo de upload.
A classe FileReference possui os seguintes eventos:

    onCancel(fileRef:FileReference):Void
    // Disparado quando o usuário cancelar a tela de "browser" onde se seleciona o arquivo para upload ou download
    
    onSelect(fileRef:FileReference):Void
    // Disparado quando o usuário seleciona um arquivo para upload
  
    onOpen(fileRef:FileReference):Void
    // Disparado no inicio do upload ou download
  
    onProgress(fileRef:FileReference, bytesLoaded:Number, bytesTotal:Number):Void
    // Disparado quando houver algum progresso no envio
  
    onComplete(fileRef:FileReference):Void
    // quando o upload ou download for completado
  
    onHTTPError(fileRef:FileReference):Void
    // Disparado quando ocorrer algum erro HTTP ex.: (404 arquivo não encontrado, quando tentar fazer download de algum arquivo)
  
    onIOError(fileRef:FileReference):Void
    // Disparado caso ocorra algum erro na leitura ou escrita do arquivo
  
    onSecurityError(fileRef:FileReference, errorString:String):Void
    // Disparado quando algum erro de segurança acorrer

  
Para acessar esses eventos é utilizado a seguinte estrutura:

var myListener:Object = new Object();
myListener.[EVENTO] = new Function({PARAMETROS_DO_EVENTO}){
    // ------------------ faça algo maravilhoso aqui ------------------ //
}
myFileRefenrence.addEventListener(myListener);

ex.:


var myListener:Object = new Object();
myListener.onComplete = new Function(fileRef:FileReference){
    trace("Upload Completo");
}
myFileRefenrence.addEventListener(myListener);


  
Então vamos começar :D

crie um novo documento em branco ( caso esteja utilizando Flash CS3 selecione "action script 2.0" )


no Primeiro frame crie um TextField do tipo dynamic e com o nome tfOutput (esse textField será utilizado para monitorarmos o andamento do nosso upload)


crie também um botão e de a ele o nome de btUpload. // esse servirá para abrirmos a "caixa" para selecionar o arquivo para download


ainda no primeiro frame adicione o código abaixo.


import flash.net.FileReference;

// essa função servira para nos ajudar a entender os passos da nossa aplicação, e somente serve de apoio
function output(msg:String):Void {
    _root.tfOutput.text += msg+"\n";
}
// Vamos definir o tipo de arquivo que "esperamos" receber
var fileTypes:Array = new Array();
var imageTypes:Object = new Object();
imageTypes.description = "Imagens (*.jpg, *.jpeg, *.gif, *.png)";
imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";
fileTypes.push(imageTypes);

// Criando e configurando o Listener do nosso objeto "FileReference"
var fileListener:Object = new Object();
fileListener.onCancel = function(file:FileReference):Void  {
    resultsTxtField.text += "upload cancelado";
};

fileListener.onSelect = function(file:FileReference):Void  {
    output("Arquivo selecionado: "+file.name);
    if (!file.upload("http://localhost/oficina/upload.php")) {
        output("Impossível selecionar arquivo.");
    }
};

fileListener.onOpen = function(file:FileReference):Void  {
    output("Abrindo Envio: "+file.name);
};

fileListener.onProgress = function(file:FileReference, bytesLoaded:Number, bytesTotal:Number):Void  {
    output("Progresso: enviado: "+bytesLoaded+", total: "+bytesTotal);
};

fileListener.onComplete = function(file:FileReference):Void  {
    output("Envio completo: "+file.name);
};

fileListener.onHTTPError = function(file:FileReference):Void  {
    output("Erro HTTP: "+file.name);
};

fileListener.onIOError = function(file:FileReference):Void  {
    output("Erro de Entrada/Saída: "+file.name);
};

fileListener.onSecurityError = function(file:FileReference, errorString:String):Void  {
    output("Erro de segurança: "+errorString);
};

// configurando o botão que ira iniciar o upload
btUpload.onRelease = function() {
    var fileReference:FileReference = new FileReference();
    fileReference.addListener(fileListener);
    fileReference.browse(fileTypes);
};





O PHP
para o arquivo que foi enviado para o servidor no PHP se utiliza a array global $_FILES que possui a seguinte estrutura.


$_FILES[ 'arquivo' ][ 'name' ]
//O nome original do arquivo que foi enviado.
  
$_FILES[ 'arquivo' ][ 'type' ]
//O tipo MIME do arquivo, por exemplo se for enviado uma imagem do tipo GIF ( ex.: computador.gif ) o MIME dela será 'image/gif'.
  
$_FILES[ 'arquivo' ][ 'size' ]
//O tamanho do arquivos que foi enviado.
  
$_FILES[ 'arquivo' ][ 'tmp_name' ]
//Um nome temporário que o PHP gera para o arquivo, esse nome é utilizado para acessar o arquivo que foi enviado.
  
$_FILES[ 'arquivo' ][ 'error' ]
//Um código que diz se ocorreu algum erro durante o upload desse arquivo.


o código do PHP vai ficar assim:

<?php
if(isset($_FILES[ 'Filedata' ]) && $_FILES[ 'Filedata' ][ 'error' ] == 0){
    $caminho_upload = $_FILES[ 'Filedata' ][ 'tmp_name' ];
    $caminho_salvar = "./files/".$_FILES[ 'Filedata' ][ 'name' ];
    // se o arquivo existe nos deletamos ele
    if(file_exists($caminho_salvar)){
        unlink($caminho_salvar);
    }
    // movemos o arquivo que foi enviado
    move_uploaded_file($caminho_upload, $caminho_salvar);

    // alteramos as permissões do arquivo para dar acesso total dos scripts
    chmod($caminho_salvar, 0777);
}
?>


nossa apresentação deve estar assim:


quando clicarmos no botão de upload devera aparecer uma caixa de dialogo para a seleção do arquivo.


quando o arquivo for selecionado o upload ira iniciar automaticamente e o progresso será mostra do no TextField


o (antes e depois) da pasta que eu estou guardando os arquivos ^^
antes


depois



Bom... é isso espero ter ajudado. ^^
qualquer duvida postem ai.
Arquivo anexo: Clique aqui para download
Links patrocinados
Últimos artigos do editor

flash.jpg Loop de som em AS3
Fazendo um som ficar em loop.
flash.jpg Carregar um arquivo XML n.
Esse artigo mostrar como car.

Compartilhe:
    Adicionar artigo no dihitt    Adicionar artigo no domelhor    Adicionar artigo no linkk    Adicionar artigo no rec6    Adicionar artigo no technorati
Opinião do leitor:
3 Comentário(s)

 Newber comentou:

Cara muito boa a sua explicação, funcionou bem aqui comigo a unica coisa que não consegui fazer foi com que o texto após o download seja visualizado na web, poderia me dar uma dica?

Publicado em: 23/07/2008 - 22:12

 Aragão comentou:

Boa-noite, estou pesquisando mais ainda não achei nada: é possível fazer a janela, default do windows para localizar o arquivo, trazer os arquivos em miniatura e não lista?

Publicado em: 14/02/2008 - 19:19

 Nicolas comentou:

Muito útil esta sua coluna Bruno. Parabéns por sua iniciativa

Publicado em: 02/10/2007 - 16:28

Destaques
ÍCONES BR ÍCONES BR
A maior coletânea de ícones do Brasil. Faça suas buscas de ícones, e encontre em forma de filtro.
Especial: Notebooks Especial: Notebooks
Este especial sobre notebooks, vamos listar 3 perfis de usuários e qual a configuração ideal para cada um
Assine nosso RSS Assine nosso RSS
Assine nossos RSS e recebe as novidades do site em seu leitor.
Autor
Artigos Relacionados
Novos Artigos
Notícias Relacionados

© 2005 - 2008 - Oficina da Net - v 3.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.