Upload de imagens com criação de thumbnails em PHP

Artigo que aborda o processo de upload de imagens em PHP com a criação de thumbnails, que são imagens de tamanho reduzido, em diretórios separados.

[ Hits: 68.633 ]

Por: Luís Fred em 04/10/2008


Upload (criando o formulário)



Por questão de organização, será conveniente armazenar as thumbnais e as imagens maiores em pastas separadas. A primeira coisa a se fazer então é criar os diretórios que usaremos durante todo o processo de upload.

Crie três pastas com os nomes: temp, thumbnails e large (que guardará as imagens de tamanho original). O diretório temp servirá de "ponte" para realizarmos todo o trabalho com as imagens. Depois crie o seguinte formulário, nomeando-o index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="">

<title>::UPLOAD::</title>
<style type="text/css" media="all">
<!--
/* Formulário no estilo PHPBB*/
* {
/* Reset browsers default margin, padding and font sizes */
margin: 0;
padding: 0;
font-size: 100%;
}

body, div, p, th, td, li, dd {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small
}

html>body, html>div, html>p, html>th, html>td, html>li, html>dd {
font-size: small
}

html {
color: #536482;
background: #DBD7D1;
height: 100%;
margin-bottom: 1px;
}

body {

font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
color: #536482;
background: #DBD7D1;
font-size: 62.5%;
margin: 10px 15px;
}

#tudo
{
width: 700px;
height: auto;
margin: 140px;
}

#content
{
width: 700px;
height: auto;
}

fieldset {
margin: 15px 0;
padding: 10px;
border-top: 1px solid #D7D7D7;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #D7D7D7;
background-color: #FFFFFF;
position: relative;
}

.rtl fieldset {
border-top: 1px solid #D7D7D7;
border-right: 1px solid #D7D7D7;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}

* html fieldset {
padding: 0 10px 5px 10px;
}

fieldset p {
font-size: 0.85em;
}

legend {
padding: 1px 0;
font-family: Tahoma,arial,Verdana,Sans-serif;
font-size: .9em;
font-weight: bold;
color: #115098;
margin-top: -.4em;
position: relative;
text-transform: none;
line-height: 1.2em;
top: 0;
vertical-align: middle;
}

/* Hide from macIE \*/
legend { top: -1.2em; }
/* end */

* html legend {
margin: 0 0 -10px -7px;
line-height: 1em;
font-size: .85em;
}


* html .rtl legend {
margin: 0;
margin-right: -7px;
}

input, textarea {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.90em;
font-weight: normal;
cursor: text;
vertical-align: middle;
padding: 2px;
color: #111111;
border-left: 1px solid #AFAEAA;
border-top: 1px solid #AFAEAA;
border-right: 1px solid #D5D5C8;
border-bottom: 1px solid #D5D5C8;
background-color: #E3DFD8;
}

.rtl input, .rtl textarea {
border-left: 1px solid #D5D5C8;
border-top: 1px solid #AFAEAA;
border-right: 1px solid #AFAEAA;
border-bottom: 1px solid #D5D5C8;
}

input:hover, textarea:hover {
border-left: 1px solid #AFAEAA;
border-top: 1px solid #AFAEAA;
border-right: 1px solid #AFAEAA;
border-bottom: 1px solid #AFAEAA;
background-color: #E9E9E2;
}

input.langvalue, textarea.langvalue {
width: 90%;
}



label {
cursor: pointer;
font-size: 0.85em;
padding: 0 5px 0 0;
}

.rtl label {
padding: 0 0 0 5px;
}

label input {
font-size: 1.00em;
vertical-align: middle;
}

dl {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1.00em;
}

dt {
float: left;
width: auto;
}

.rtl dt {
float: right;
}

dd { color: #666666;}
dd + dd { padding-top: 5px;}
dt span { padding: 0 5px 0 0;}
.rtl dt span { padding: 0 0 0 5px;}

dt .explain { font-style: italic;}

dt label {
font-size: 1.00em;
text-align: left;
font-weight: bold;
color: #4A5A73;
}

.rtl dt label {
text-align: right;
}

dd label {
font-size: 1.00em;
white-space: nowrap;
margin: 0 10px 0 0;
color: #4A5A73;
}

.rtl dd label {
margin: 0 0 0 10px;
}

html>body dd label input { vertical-align: text-bottom;}

dd input {
font-size: 1.00em;
max-width: 100%;
}


fieldset dl {
margin-bottom: 10px;
font-size: 0.85em;
}

fieldset dt {
width: 45%;
text-align: left;
border: none;
border-right: 1px solid #CCCCCC;
padding-top: 3px;
}



fieldset dd {
margin: 0 0 0 45%;
padding: 0 0 0 5px;
border: none;
border-left: 1px solid #CCCCCC;
vertical-align: top;
font-size: 1.00em;
}



fieldset dl:hover dt, fieldset dl:hover dd {
border-color: #666666;
}

fieldset dl:hover dt label {
color: #000000;
}

fieldset dl dd label:hover {
color: #BC2A4D;
}

input:focus, textarea:focus {
border: 1px solid #BC2A4D;
background-color: #E9E9E2;
color: #BC2A4D;
}
fieldset.submit-buttons {
text-align: center;
border: none;
background-color: transparent;
margin: 0;
padding: 4px;
margin-top: -1px;
}

p.submit-buttons {
text-align: center;
margin: 0;
padding: 4px;
margin-top: 10px;
}

fieldset.submit-buttons input, p.submit-buttons input {
padding: 3px 2px;
}

fieldset.submit-buttons legend {
display: none;
}
a.button1, input.button1, input.button3,
a.button2, input.button2 {
width: auto !important;
padding: 1px 3px 0 3px;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
color: #000;
font-size: 0.85em;
background: #EFEFEF;
cursor: pointer;
}

a.button1, input.button1 {
font-weight: bold;
border: 1px solid #666666;
}


a.button1:hover, input.button1:hover,
a.button2:hover, input.button2:hover {
border: 1px solid #BC2A4D;
background: #EFEFEF url("../images/bg_button.gif") repeat bottom;
color: #BC2A4D;
}

input.disabled {
font-weight: normal;
color: #666666;
}
-->
</style>
</head>

<body>

<div id="tudo">
<div id="content">
<form id="" method="post" action="./insert_image.php" enctype="multipart/form-data" onsubmit="submit.disabled = 'disabled';">
<fieldset>
<legend>Upload de Imagem</legend>
<dl>
<dt><label>Imagem</label><br />
<span class="explain">Indique o diretório onde se encontra a imagem.</span></dt>
<dd><input type="hidden" name="MAX_FILE_SIZE" value="10000000" /></dd>
<dd><input id="admin_pass1" type="file" size="25" maxlength="100" name="img" value=""/></dd>
</dl>
</fieldset>
<fieldset class="submit-buttons">
<input class="button1" type="submit" id="submit" onclick="this.className = 'button1 disabled';" name="submit" value="Start" /> </fieldset>

</form>
</form>
</div>
</div>

</body>
</html>

Faça o download do código acima aqui.

Este é o formulário, na verdade não há muita necessidade de se criar um formulário tão estiloso para um artigo desta categoria. Por outro lado, é sempre bom levarmos em conta a estética e nos habituarmos a isso. O design de uma página, quando aliado a sua funcionalidade, pode fazer toda a diferença.

Página anterior     Próxima página

Páginas do artigo
   1. Introdução
   2. Upload (criando o formulário)
   3. Upload (estabelecendo configurações)
   4. Upload (função para redimensionar as imagens)
   5. Upload (copiando as imagens para seus diretórios)
   6. Conclusão e referências
Outros artigos deste autor

Criando uma agenda eletrônica com PHP/MySQL

Como criar um sistema de autenticação de usuários usando PHP/MySQL

Leitura recomendada

Manipulação de arquivos com PHP

Gerando documentos PDF com a classe FPDF no PHP

PEAGLE: Serviço Web de busca indexada em seu servidor local

O perigo no gerenciador de uploads do PHP

Organizando fotos de camêra digital

  
Comentários
[1] Comentário enviado por jolupi em 07/11/2008 - 15:09h

Excelente conjunto de artigos. Copiei para estudar e não funcionou. Ele não encontra insert_image.php que é a action do index.php. Vc já reparou ou eu estou dando mole ?

[2] Comentário enviado por fredwind em 07/11/2008 - 20:59h

é verdade jolupi, o formulario não consegue encontrar insert_image.php porque na verdade ele não existe, foi um vacilo meu. Na verdade o script que o formulario deveria procurar é upload.php, pouco antes de enviar o artigo pro site eu mudei o nome do script insert_image.php para upload.php porque achei mais conveniente e esqueci de fazer a modificação no formulario, desculpe. Qualquer duvida pode me mandar um email, é sempre um prazer ajudar!!!

[3] Comentário enviado por doc.ric em 22/01/2009 - 01:05h

Oi,

Gostei muito da tua solução, e pretendo utilizá-la em um projeto q estou desenvolvendo.
Tentei fazer funcionar o upload, mas não consigo criar as fotos jpg nas pastas "large" e "thumbnail" ... Estou usando o WampServer, com PHP 5.2.6.
Podes me mandar teu email de contato para q possa te remeter a instalação ?
Um abraço,
Ric
[email protected]

[4] Comentário enviado por driseven em 05/02/2009 - 10:21h

amigos,


qdo tente anexar uma imagem, ocorreu o seguinte erro:

Warning: main(./fun_upload.php) [function.main]: failed to open stream: No such file or directory in /home/quintalf/public_html/teste/upload.php on line 6

Warning: main(./fun_upload.php) [function.main]: failed to open stream: No such file or directory in /home/quintalf/public_html/teste/upload.php on line 6

Warning: main(./fun_upload.php) [function.main]: failed to open stream: No such file or directory in /home/quintalf/public_html/teste/upload.php on line 6

Warning: main() [function.include]: Failed opening './fun_upload.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/quintalf/public_html/teste/upload.php on line 6
A imagem deve ter um nome legivel


alguém poderia me dizer o pq?

[5] Comentário enviado por scavenger em 09/03/2009 - 09:22h

Driseven,

Altere a linha:

include ($path . "fun_upload." . $phpExt);

para:

include ($path . "func_upload." . $phpExt);

do arquivo upload.php

Até mais,

Rodrigo Spillere

[6] Comentário enviado por amj233 em 06/04/2009 - 17:02h

Muito bom!!!

Se houver duas imagens com nomes iguais o sistema substitui a anterior pela nova, não é?.
Me corrijam se estiver errado!!!

[7] Comentário enviado por henbran em 18/02/2010 - 10:42h

BOM DIA.
PORVENTURA HÁ COMO CARREGAR OS BIT's DA IMAGEM, UTILIZANDO RECURSOS HTML/JAVASCRIPT, AO INVÉS DO ARQUIVO EM SI?
MEU PROVEDOR (localweb) TEM RESTRIÇÕES DE USUÁRIO, SERIA MAIS TRABALHOSO CONCEDER DIREITOS A UM DETERMINADO USUÁRIO EM CARREGAR IMAGENS.
O QUE PRECISO NA VERDADE É INSERIR A IMAGEM NO BANCO DE DADOS E NÃO GUARDÁ-LA NO SERVIDOR EM FORMA DE ARQUIVO.
OBRIGADO.

[8] Comentário enviado por fredwind em 19/02/2010 - 09:02h

Caro herban, eu creio que esta solução não seja possivel ou pelo menos ainda nao tenho visto algo assim em trabalhos com MySQL, é preciso que as imagens fiquem em diretorios especificos e seus nomes e/ou paths no banco de dados. Obrigado pelo comentário. Qualquer coisa é so da o toque!!

[9] Comentário enviado por Luiz Araujo em 23/02/2010 - 17:41h

Windboy,

Obrigado pelo código.


No formulário do arquivo principal, que deve se chamar index.html (location chamado pelo upload.php) o action ainda está apontando para "./insert_image.php" ao invés de "upload.php".

No link para o código fonte do upload.php:
(http://www.vivaolinux.com.br/imagens/artigos/comunidade/upload.php.txt_
Na linha 10, houve um erro de digitação. O código correto é:
include ($path . "func_upload." . $phpExt);

[]s,


Contribuir com comentário