Como usar no doc spotfy
-
Upload
jseleuterio -
Category
Documents
-
view
214 -
download
0
description
Transcript of Como usar no doc spotfy
Upload de imagens com Uploadify sem Banco de Dados
Por: Marciano Dias
Site: www.marcianodias.com.br
Email: [email protected]
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.