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 fcil implementao e a possibilidade de
customizao.
Neste tutorial ensinarei como usar o Uploadify e como configurar o uploadify e como
implement-lo em suas pginas web. Um detalhe importante que neste tutorial no irei
utilizar banco de dados. Quem sabe em um prximo tutorial, dependendo do feedback deste
tutorial.

Vamos ao tutorial
Para este tutorial utilizei a verso free do uploadify. Segue o link para download:
http://www.uploadify.com/download/
Aps 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 diretrio 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, necessrio fazer
alguns ajustes para funcionar de forma correta.
Na pasta onde contm os arquivos do Uploadify crie uma pasta com o nome uploads.
OBS: O nome da pasta no uma regra, nem o local, voc pode colocar qualquer nome e em
qualquer local do diretrio 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 prprio nome da pasta.

Dica: se voc no tm habilidades e conhecimentos suficiente para fazer alteraes, ento, o

ideal deixar o padro e evitar dores de cabea. Siga apenas este tutorial.

Como voc observou, at agora o uploadify no funciona. Pois embora o diretrio esteja
configurado para ser /uploads (no caso do exemplo), o que acontece que , por conta da
varivel global $_SERVER['DOCUMENT_ROOT'], o diretrio est apontando para outro local.
Ento, 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 implementao em suas pginas HTML ou PHP
simples.
Abra o arquivo index.html que veio junto com o uploadify. Nesse arquivo voc tm,
basicamente, tudo necessrio para utilizar em suas pginas. Basta copiar. Neste passo no tm
segredo. s conhecimento em HTML.
O segredo estar em saber quais so as chamadas dos scripts abaixo so 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 bsico. Nem precisaria dizer neste tutorial que essas chamadas ficam dentro do Head do
HTML.
Agora, voc tm script que mostra o boto 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 pgina, 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 bsico para poder utiliz-lo. Voc encontra
mais informaes no prprio 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 alteraes para deixar
no ponto de utilizar, caso voc tenha encontrado dificuldades.