Tutorial SwfUpload – Enviando arquivos Flash + php
Criado por Luiz Felipe às jul 7, 2009 em Códigos, Tutorial | View Comments
Olá, pessoal
Conforme prometido, continuo o tutorial de como instalar o Swfupload com PHP.
Esta ferramenta é realmente muito boa, desde que funcione corretamente. Ela permite, além de selecionar mais de um arquivo por vez, que o usuário tenha noção de quanto falta para que o seu arquivo seja enviado, ou seja, tem uma barra de progresso do upload. Acredito que deva ter umas 4 ou 5 ferramentas igual a estas.
Por isso criei este pequeno tutorial sobre como utilizar a ferramente de uma forma bem básica e descomplicada. E garanto, não levei mais do que meia hora pra fazer tudo e configurar o upload.
Vamos lá então:
Passo 1 – Estrutura
Em vez de usar a estrutura dos arquivos que foi usado, eu criei a minha própria muito mais simplificada.
Para simplificar, eu criei três arquivos php:
- um para conter a chamada da ferramenta e o campo input o formulário ( index.php )
- outro para o upload em si ( upload.php )
- uma classe para o upload bem simples (upload.class.php)
Ficou assim a organização das pastas:
Organização das pastas do tutorial
Existe uma pasta arquivos, aonde conterá os arquivos enviados… =)
A pasta swfupload que contém tudo o que a ferramente precisa: css, flash, html, imagens, água e comida..
Dentro desta pasta colei os arquivos principais em core.
Passo 2 – Criação do arquivo Index.php
Se fôssemos resumir o arquivo index, poderíamos, dividí-lo em 3 partes:
Lembre-se de entender este arquivo, não copie ele. Eu empacotei tudo num arquivo lá em baixo.
Inclusão dos JS da Biblioteca:
<script src="swfupload/core/swfupload.js" type="text/javascript"></script> <script src="swfupload/js/swfupload.queue.js" type="text/javascript"></script> <script src="swfupload/js/fileprogress.js" type="text/javascript"></script> <script src="swfupload/js/handlers.js" type="text/javascript"></script>
Configuração da ferramenta:
<script type="text/javascript">// < ![CDATA[
// < ![CDATA[
var swfu;
// ao carregar a página, chama o swfupload
window.onload = function() {
var settings = {
flash_url : "swfupload/core/Flash/swfupload.swf", // caminho do flash usado pelo sistema
upload_url: "upload.php", // url do php para upload
post_params: {"PHPSESSID" : "< ?php echo session_id(); ?>"}, // parâmetros extras.
file_size_limit : "100 MB", // limite de envio de arquivo em megas
file_types : "*.*", // tipos de arquivos permitidos> *.jpg; *.png; *.gif;
file_types_description : "Todos os arquivos", // Descrição da caixinha de arquivos permitidos
file_upload_limit : 100, // quantidade limite de upload de arquivos
file_queue_limit : 0, // limite de marcação de arquivos para upload
file_post_name: "uplfile", // Nome da variável que envia o conteudo do arquivo
custom_settings : {
progressTarget : "fsUploadProgress", // configurações do botão cancelar
cancelButtonId : "btnCancel"
},
debug: false, // debug do sistema, marque true para debugar o envio e corrigir erros
// Button settings
button_image_url: "swfupload/images/TestImageNoText_65x29.png",// imagem do botão procurar
button_width: "65", // largura do botão procurar
button_height: "29", // altura do botão procurar
button_placeholder_id: "spanButtonPlaceHolder", // id do elemento que conterá o botão procurar
button_text: '<span class="theFont">Procurar</span>', // Html de dentro do botão procurar
button_text_style: ".theFont { font-size: 16; }", // style do botão
button_text_left_padding: 12, // espaçamento esquerdo do botão
button_text_top_padding: 3, // espaçamento direito do botão
// Estes eventos são definidos em handlers.js
file_queued_handler : fileQueued, // ao selecionar arquivos
file_queue_error_handler : fileQueueError, // erro ao adicionar erros
file_dialog_complete_handler : fileDialogComplete, // seleção do arquivo completo ( somente um )
upload_start_handler : uploadStart, // início do upload
upload_progress_handler : uploadProgress, // progresso do upload
upload_error_handler : uploadError, // erro do upload
upload_success_handler : uploadSuccess, // sucesso do upload
upload_complete_handler : uploadComplete, // upload completo ( todos )
queue_complete_handler : queueComplete // seleção de todos os arquivos completo
};
swfu = new SWFUpload(settings); // envia as configurações para a classe
};
// ]]></script>
E Html do formulário:
<div id="content"> <h2>Demo Simples</h2> <form id="form1" action="index.php" enctype="multipart/form-data" method="post">Este exemplo demonstra uma forma simples de se utilizar o SWFUpload. Ele usa o Plugin de Múltiplos arquivos para simplficar o upload ou cancelamento de todos os arquivos marcados. <div id="fsUploadProgress" class="fieldset flash"><span class="legend">Selecionar Arquivos</span></div> <div id="divStatus">0 Arquivos Enviados</div> <div><span id="spanButtonPlaceHolder"> </span> <input id="btnCancel" style="margin-left: 2px; font-size: 8pt; height: 29px;" onclick="swfu.cancelQueue();" disabled="disabled" type="button" value="Cancelar Todos os uploads" /></div> </form></div>
Passo 2 – Criação do arquivo upload.php:
Este arquivo é bem simples e configura a pasta que será enviada, além de chamar a classe Upload.class.php.
<?php
include_once "Upload.class.php";
# instanciamos a classe
$upload = new Upload();
# pasta que será enviada o arquivo
$upload->caminhoArquivo = 'arquivos/';
# recuperamos o nome do arquivo
$upload->nomeArquivo = $_FILES['uplfile']['name'];
# extensão do arquivo
$upload->extArquivo = end(explode(".",$upload->nomeArquivo));
# arquivo temporario que está sendo enviado
$upload->arquivoTemporario = $_FILES['uplfile']['tmp_name'];
# envia o arquivo e retorna se tiver erro
die($upload->enviarArquivo());
?>
Passo 3 – Criação da classe upload.class.php
<?
class Upload {
public $nomeArquivo;
public $conteudoArquivo;
public $caminhoArquivo;
public $arquivoTemporario;
public function __construct (){
$this->nomeArquivo = '';
$this->conteudoArquivo = '';
$this->caminhoArquivo = './';
$this->arquivoTemporario = '';
}
/**
* Método que grava o conteudo no arquivo via fopen
*/
public function enviarArquivo () {
# cria o caminho do arquivo
$arquivo = $this->caminhoArquivo.$this->nomeArquivo;
# recuperamos o conteudo do arquivo enviado
$this->conteudoArquivo = file_get_contents($this->arquivoTemporario);
# escreve no arquivo, com o conteúdo desejado, usando este método de escrita
$ponteiro = fopen($arquivo, 'wa');
fwrite($ponteiro, $this->conteudoArquivo);
fclose($ponteiro);
}
}
?>
Passo 4 – Baixe os arquivos e descompacte tudo:
Resultado
No final, ficará assim:
Os arquivos originais encontram-se aqui:
- Arquivos do núcleo do sistema (SWFUpload v2.2.0.1 Core.zip)
- Arquivos de demonstração (SWFUpload v2.2.0.1 Samples.zip)
-
http://www.vibpositive.com.br Gabriel Oliveira
-
http://www.vibpositive.com.br Gabriel Oliveira
-
Luiz Felipe
-
Heitor
-
Heitor
-
Luiz Felipe
-
Heitor
-
Heitor
-
http://weber.eti.br Luiz F. Weber
-
http://weberscripts.wordpress.com Luiz WeberScripts
-
Diony
-
Diony
-
Luiz Felipe
-
Diony
-
Diony
-
Luiz Felipe
-
Diony
-
Diony
-
Luiz Felipe
-
http://www.espacoevida.com Everton
-
http://www.espacoevida.com Everton
-
bomber
-
bomber
-
Luiz Felipe
-
bomber
-
bomber
-
http://twitter.com/weberscripts/status/3659483840 Weber Scripts
-
http://twitter.com/weber_ti/status/3659483840 Weber TI
-
http://twitter.com/weber_ti/status/4409376257 Weber TI
-
http://weber.eti.br/2009/10/05/novos-projetos/ Novos projetos | Weber TI
-
http://aindanão Ricardo
-
http://weber.eti.br Luiz F. Weber
-
http://weber.eti.br/ Luiz Felipe
-
http://weber.eti.br Luiz F. Weber
-
http://weber.eti.br/ Luiz Felipe
-
Lord Robs
-
Lord Robs
-
http://weber.eti.br Luiz F. Weber
-
http://weber.eti.br/ Luiz Felipe
-
http://estaleirodigital.com Diego Sampaio
-
http://estaleirodigital.com Diego Sampaio
-
http://weber.eti.br Luiz F. Weber
-
http://weber.eti.br/ Luiz Felipe
-
Fabricioblz
-
http://weber.eti.br Luiz F. Weber
-
T3adans
-
http://weber.eti.br Luiz F. Weber
-
Marco Medeiros
-
http://weber.eti.br Luiz F. Weber
-
Anônimo
-
Pitbull Icr
-
Amelia
-
http://www.adhost.dk/sogemaskineoptimering.shtml søgemaskineoptimering
-
http://www.adhost.dk/sogemaskineoptimering.shtml søgemaskineoptimering
-
Rodrigo93_1989
-
Luís Carlos
-
Eduardo Silva
-
http://weber.eti.br Luiz F. Weber
-
Glenio
-
http://weber.eti.br Luiz F. Weber
-
Camila Cristina
-
Glenio
-
Glenio
Twitts do criador
- luizwbr: Acabei de atualizar os plugins de pagamento do @pagseguro e do @pag_digital pra #Virtuemart2: http://t.co/ZgMfGLuF #joomla :)
- luizwbr: RT @andreandraderj: Primeiro prototipo usando o Bootstrap no Joomla + Virtuemart http://t.co/QNTq070T #projetoestudiosite
- luizwbr: Olá @dumancha. Tenho sim, me entra no site http://t.co/hHleDQcH, lá tem o módulo que vocë está procurando.
- luizwbr: RT @julianoaugusto_: O que foi o Joomla Day Ribeirão Preto #JDRP http://t.co/fFC4tw9Y #Joomleiros #Joomla #jdbr12 #jab12 #jpositiv
Parceiros
Delicious/luizwbr
- Monitorar Ajax Requests sem framework JS
- eBcommerce « BuscaPé Developer
- Observar evento style css jquery
- Tabela de acentos e caracteres especiais
- Validação de formulários HTML com JavaScript
- Komodo Edit 5 - Dark Color Scheme | deuxcode.com
- Frete Já - Cotação de Frete Online
- ASP2PHP
- Linux Dedicated Server Setup - GMod Wiki
- Tonido - Run your own Personal Cloud
