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: 72.349 ]

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

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

Criando uma agenda eletrônica com PHP/MySQL

Leitura recomendada

O perigo no gerenciador de uploads do PHP

Enviar mensagem ao usuário trabalhando com as opções do php.ini

Organizando fotos de camêra digital

Manipulação de arquivos com PHP

Trabalhando com arquivos em PHP

  
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
doc.ric@bol.com.br

[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




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts