Pular para o conteúdo

Upload de várias imagens com PHP e jQuery

Dica publicada em Linux / Introdução
Renan Martins Pimentel renanmpimentel

Por Renan Martins Pimentel em 17/11/2011

Hits: 26.678 Categoria: Linux Subcategoria: Introdução
  • Indicar
  • Impressora
  • Denunciar

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

Mostrar a previsão do tempo com PHP

Gerando QR Code com PHP

Verificar se o CPF é válido

Autenticação e criptografia de senhas usando PHP

Leitura recomendada

NTFS sem gambiarra

Vídeo aula - Executando o VirtualBox

Gerencie seu suporte e colabore com o Projeto SolBT

Relátorios por nomes SARG Mandriva 2008 Spring

Ajude o Pidgin a ser o melhor messenger do mundo

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

Entre na sua conta para comentar.