Upload de imagens com Uploadify sem Banco de Dados

Por: Marciano Dias

Site: www.marcianodias.com.br

Email: contato@marcianodias.com

Uploadify é um plugin que adiciona a funcionalidade de multiplo upload de arquivo arquivos

em seu site. Um dos pontos fortes de plugin é sua fácil implementação e a possibilidade de

customização.

Neste tutorial ensinarei como usar o Uploadify e como configurar o uploadify e como

implementá-lo em suas páginas web. Um detalhe importante é que neste tutorial não irei

utilizar banco de dados. Quem sabe em um próximo tutorial, dependendo do feedback deste

tutorial.

Vamos ao tutorial Para este tutorial utilizei a versão free do uploadify. Segue o link para download:

http://www.uploadify.com/download/

Após baixar o uploadify.zip extraia os arquivos na pasta raiz de onde ficará os arquivos de

upload de seu site. Veja como ficou o meu:

Agora, você pode excluir o arquivo uploadify.zip.

Se você abrir o navegador e acessar o diretório do uploadify, você terá o seguinte resultado:

Para teste, carreguei uma imagem. Veja o resultado:

Se você clicar em Select Files, já é possivel carregar os arquivos. Entretanto, é necessário fazer

alguns ajustes para funcionar de forma correta.

Na pasta onde contém os arquivos do Uploadify crie uma pasta com o nome uploads.

OBS: O nome da pasta não é uma regra, nem o local, você pode colocar qualquer nome e em

qualquer local do diretório de arquivos de seu site.

Agora, abra o arquivo uploadify.php. Neste arquivo você poderá alterar o local da pasta que

ficará os uploads e o próprio nome da pasta.

Dica: se você não têm habilidades e conhecimentos suficiente para fazer alterações, então, o

ideal é deixar o padrão e evitar dores de cabeça. Siga apenas este tutorial.

Como você observou, até agora o uploadify não funciona. Pois embora o diretório esteja

configurado para ser /uploads (no caso do exemplo), o que acontece é que , por conta da

variável global $_SERVER['DOCUMENT_ROOT'], o diretório está apontando para outro local.

Então, ainda no arquivo uploadify.php, procure a linha:

$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

E altere para:

$targetPath = $targetFolder;

Remova a “/” de $targetFolder = '/uploads'; . Resultado:

$targetFolder = 'uploads';

A parte mais “dificil” já foi ensinada. A implementação em suas páginas HTML ou PHP é

simples.

Abra o arquivo index.html que veio junto com o uploadify. Nesse arquivo você têm,

basicamente, tudo necessário para utilizar em suas páginas. Basta copiar. Neste passo não têm

segredo. É só conhecimento em HTML.

O segredo estar em saber quais são as chamadas dos scripts abaixo são importantes para o

funcionamento do uploadify:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

type="text/javascript"></script>

<script src="jquery.uploadify.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="uploadify.css">

Isso é básico. Nem precisaria dizer neste tutorial que essas chamadas ficam dentro do Head do

HTML.

Agora, você têm script que mostra o botão “Select Files” e o javascript que faz o uploadify

funcionar. Veja:

<form>

<div id="queue"></div>

<input id="file_upload" name="file_upload" type="file" multiple="true">

</form>

<script type="text/javascript">

<?php $timestamp = time();?>

$(function() {

$('#file_upload').uploadify({

'formData' : {

'timestamp' : '<?php echo $timestamp;?>',

'token' : '<?php echo md5('unique_salt' .

$timestamp);?>'

},

'swf' : 'uploadify.swf',

'uploader' : 'uploadify.php'

});

});

</script>

Sempre que você for colocar um sistema de upload com uploadify em alguma página, basta

utilizar esses scripts para fazer funcionar.

Observe:

'swf' : 'uploadify.swf',

'uploader' : 'uploadify.php'

Observe que meu index.php está dentro da pasta do uploadify(lembrando que minha pasta

raiz é uploadify – poderia ser qualquer outro nome). Veja:

Tudo que foi ensinado aqui sobre o Uploadify é o básico para poder utilizá-lo. Você encontra

mais informações no próprio site do uploadify. Como disse, dependendo do feedback deste

tutorial, farei um novo tutorial ensinando como cadastrar as imagens no banco de dados.

Segue em anexo o link para download dos arquivos. Fiz algumas poucas alterações para deixar

no ponto de utilizar, caso você tenha encontrado dificuldades.