Upload de várias imagens com PHP e jQuery

Publicado por Renan Martins Pimentel em 17/11/2011

[ Hits: 23.258 ]

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

Autenticação e criptografia de senhas usando PHP

Gerando QR Code com PHP

Fullscreen com jQuery e CSS

Verificar se o CPF é válido

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

Leitura recomendada

Deepin 15.4.1 no CCE ZX3020 (2 em 1)

Comandos para o dia-a-dia

Trabalhando com Xampp no Linux

Ocomon - Instalação e Configuração

Configurando Hugepages

  

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
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts