Upload de várias imagens com PHP e jQuery

Publicado por Renan Martins Pimentel em 17/11/2011

[ Hits: 23.355 ]

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

Verificar se o CPF é válido

Autenticação e criptografia de senhas usando PHP

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

Fullscreen com jQuery e CSS

Mostrar a previsão do tempo com PHP

Leitura recomendada

Solução para alteração de senha pelo próprio usuário no Samba

Como habilitar execução do sudo no Cron

Backup MySQL com SSH

Habilitando mais de 4 placas multi-seriais em kernel 2.6.13 ou superior

Redimensionar HD - com Live-CD do Ubuntu

  

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