Upload de várias imagens com PHP e jQuery

Publicado por Renan Martins Pimentel em 17/11/2011

[ Hits: 26.034 ]

Blog: http://www.renanmpimentel.com.br

 


Upload de várias imagens com PHP e jQuery



Uma forma fácil e diferente de fazer upload de arquivos usando PHP e jQuery.

Conhecendo o plugin : uploadfy

Então vou fazer um breve tutorial, que não vai levar 30 segundos para ser entendido e muito menos para ser implementado no seu site/Blog.

O primeiro passo é fazer o download da biblioteca aqui: www.uploadify.com

Agora descompacte o arquivo, separe por pastas cada extensão ou deixe dentro de uma pasta universal (cada um tem seu jeito de fazer).

Agora dentro do HTML, faça as ligações:

<link href="uploadify/uploadify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="uploadify/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="uploadify/swfobject.js"></script> <script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#file_upload').uploadify({ 'uploader' : 'uploadify/uploadify.swf', 'script' : 'uploadify/uploadify.php', 'cancelImg' : 'uploadify/cancel.png', 'folder' : '/uploads', //Diretório, para onde vão ser movidas as imagens. 'auto' : false, // False para não começar automaticamente, e True para começar o upload automaticamente. 'multi' : true // False para fazer upload apenas de um arquivo e True para vários arquivos. }); }); </script>

Depois é só inserir o campo 'input' e o link para fazer o upload, dentro do <body>:

<input id="file_upload" name="file_upload" type="file" /> <a href="javascript:$('#file_upload').uploadifyUpload();">Upload dos arquivos</a>

Salvando tudo no banco de dados

Até ai, já está tudo funcionando normal, só que falta salvar o nome das imagens em nosso banco de dados. Então vamos ter que alterar algumas coisas no arquivo 'uploadify.php'.

Aqui eu tirei as referencias do autor, para não ficar muito grande o código. Mas por respeito ao trabalho do autor, eu sugiro que deixe-o.

<?php ## Fazer conexão com o seu banco de dados ## if (!empty($_FILES)) { $tempFile = $_FILES['Filedata']['tmp_name']; $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_REQUEST['folder'] . '/'; $arquivo = md5(uniqid(time())).".".jpg; //Renomear o arquivo para que não exista outro igual $targetFile = str_replace('//','/',$targetPath) . $arquivo; mysql_query("INSERT INTO tabela (`id` ,`arquivo`)VALUES (NULL , '$arquivo')"); move_uploaded_file($tempFile,$targetFile); echo str_replace($_SERVER['DOCUMENT_ROOT'],'',$targetFile); } ?>

Feito isto, o upload fica fácil e prático. Se você quiser mudar alguma coisa na aparência, é só alterar o arquivo '.css' do plugin.

E para fazer a galeria de imagens no 'front-end', em um próximo tutorial eu mostro para vocês.

Abraços a todos.

Outras dicas deste autor

Fullscreen com jQuery e CSS

Cadastrar eventos/compromissos no Google Agenda com cURL [PHP]

Verificar se o CPF é válido

Autenticação e criptografia de senhas usando PHP

Mostrar a previsão do tempo com PHP

Leitura recomendada

Como fazer seu próprio Debian Live USB Linux

O que é a certificação LPIC-1

Configurando mouse Microsoft Intellimouse 4.0 no Debian ETCH

Instalação do Beryl no Debian Etch

Gerenciando emails pelo console no Fedora Core 5

  

Comentários
[1] Comentário enviado por marreko em 08/02/2012 - 12:53h

Fiz tudo como diz ai, mas não aconteceu nada.

Pode me ajudar??

[2] Comentário enviado por mabp em 29/02/2012 - 12:49h

boa tarde,

eu segui as indicações que estão acima, menos a última parte (de gravar na base de dados) e realmente o script corre sem erros mas tambem nao faz o upload! como posso resolver o problema???

[3] Comentário enviado por pjnbds em 10/03/2012 - 18:13h

Precisa tambem fazer download do script completo.
faça uma busca do "uploadify" no google.

tem ate video aula ensinando a usar.

mas so consegui fazer funcionar local e com windows,
no debian nao esta upando para pasta.




Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts