Upload de imagem com PHP e MySQL

Aprenda a fazer upload de imagens e gravar no banco de dados o caminho da imagem, para exibir posteriormente nas suas páginas. Funciona muito bem para cadastros de usuários, ou gravar a imagem destaque de um produto, de uma notícia.

Por | @@faael Programação
<p>Ol&aacute; pessoal, desculpem pela aus&ecirc;ncia, mas &eacute; que eu estou trabalhando em alguns projetos e o tempo est&aacute; curto. Hoje nesse artigo vou mostrar como fazer um upload de uma imagem para o servidor e tamb&eacute;m gravar isso no banco de dados.&nbsp;Vou utilizar como exemplo um mini-portal, onde o usu&aacute;rio ir&aacute; se cadastrar e escolher sua foto de exibi&ccedil;&atilde;o. Ent&atilde;o, vamos l&aacute;.</p> <p>&nbsp;</p> <h2>1. Banco de dados</h2> <p><strong>Vamos criar nossa tabela de usu&aacute;rios:</strong></p> <p><code>CREATE TABLE `usuarios` (<br />`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,<br />`nome` VARCHAR( 50 ) NOT NULL ,<br />`email` VARCHAR( 50 ) NOT NULL ,<br />`foto` VARCHAR( 100 ) NOT NULL<br />) ENGINE = MYISAM ;</code></p> <p>&nbsp;</p> <h2>2. Formul&aacute;rio de cadastro</h2> <p>&nbsp;</p> <p>Agora vamos desenhar nosso formul&aacute;rio e apontar a action para o mesmo arquivo:</p> <p style="padding-left: 30px;"><strong>IMPORTANTE:</strong>&nbsp;nunca se esque&ccedil;a que quando se trata de arquivos, precisamos adicionar ao nosso form a seguinte propriedade:<strong>enctype=&rdquo;multipart/form-data&rdquo;</strong></p> <p style="padding-left: 30px;">&nbsp;</p> <pre class="html4strict" style="margin: 0px !important; padding: 0px !important; font-family: monospace; font-size: 12px; background-color: #e1e5e9; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; overflow: visible !important; line-height: 16px !important; width: auto !important; clear: none !important; -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important; color: #110000;"><span style="margin: 0px; padding: 0px; color: #00bbdd;">&nbsp;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">html</span> xmlns<span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"http://www.w3.org/1999/xhtml"</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">head</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">meta</span> <span style="margin: 0px; padding: 0px; color: #000066;">http-equiv</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"Content-Type"</span> <span style="margin: 0px; padding: 0px; color: #000066;">content</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"text/html; charset=utf-8"</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">title</span>&gt;</span>Cadastro de usu&aacute;rio<span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #66cc66;">/</span><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">title</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #66cc66;">/</span><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">head</span>&gt;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">body</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">h1</span>&gt;</span>Cadastro de Usu&aacute;rio<span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #66cc66;">/</span><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">h1</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">form</span> <span style="margin: 0px; padding: 0px; color: #000066;">action</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"<!--?php echo $_SERVER['PHP_SELF'] ?--></span></span>" method="post" enctype="multipart/form-data" name="cadastro" &gt; Nome:<span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">br</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">input</span> <span style="margin: 0px; padding: 0px; color: #000066;">type</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"text"</span> <span style="margin: 0px; padding: 0px; color: #000066;">name</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"nome"</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">br</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">br</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;</span> Email:<span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">br</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">input</span> <span style="margin: 0px; padding: 0px; color: #000066;">type</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"text"</span> <span style="margin: 0px; padding: 0px; color: #000066;">name</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"email"</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">br</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">br</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;</span> Foto de exibi&ccedil;&atilde;o:<span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">br</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">input</span> <span style="margin: 0px; padding: 0px; color: #000066;">type</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"file"</span> <span style="margin: 0px; padding: 0px; color: #000066;">name</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"foto"</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">br</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">br</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">input</span> <span style="margin: 0px; padding: 0px; color: #000066;">type</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"submit"</span> <span style="margin: 0px; padding: 0px; color: #000066;">name</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"cadastrar"</span> <span style="margin: 0px; padding: 0px; color: #000066;">value</span><span style="margin: 0px; padding: 0px; color: #66cc66;">=</span><span style="margin: 0px; padding: 0px; color: #ff0000;">"Cadastrar"</span> <span style="margin: 0px; padding: 0px; color: #66cc66;">/</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #66cc66;">/</span><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">form</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #66cc66;">/</span><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">body</span>&gt;</span> <span style="margin: 0px; padding: 0px; color: #009900;">&lt;<span style="margin: 0px; padding: 0px; color: #66cc66;">/</span><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">html</span>&gt;</span></pre> <p>&nbsp;</p> <h2>3. Cadastrando Usu&aacute;rio</h2> <p>Como a action est&aacute; apontando para o pr&oacute;prio arquivo, nosso c&oacute;digo vai nele mesmo:</p> <pre class="php" style="margin: 0px !important; padding: 0px !important; font-family: monospace; font-size: 12px; background-color: #e1e5e9; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; overflow-x: scroll !important; line-height: 16px !important; width: auto !important; clear: none !important; -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important; color: #110000;"><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;"><!--?php</span-->&lt;? <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Conex&atilde;o com o banco de dados</span> <span style="margin: 0px; padding: 0px; color: #000088;">$conn</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #339933;">@</span><span style="margin: 0px; padding: 0px; color: #990000;">mysql_connect</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"localhost"</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"usuario"</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"senha"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> or <span style="margin: 0px; padding: 0px; color: #990000;">die</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"Problemas na conex&atilde;o."</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$db</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #339933;">@</span><span style="margin: 0px; padding: 0px; color: #990000;">mysql_select_db</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"banco"</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #000088;">$conn</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> or <span style="margin: 0px; padding: 0px; color: #990000;">die</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"Problemas na conex&atilde;o"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Se o usu&aacute;rio clicou no bot&atilde;o cadastrar efetua as a&ccedil;&otilde;es</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$_POST</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">'cadastrar'</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Recupera os dados dos campos</span> <span style="margin: 0px; padding: 0px; color: #000088;">$nome</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #000088;">$_POST</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">'nome'</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$email</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #000088;">$_POST</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">'email'</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$foto</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #000088;">$_FILES</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"foto"</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Se a foto estiver sido selecionada</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #339933;">!</span><span style="margin: 0px; padding: 0px; color: #990000;">empty</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$foto</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"name"</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Largura m&aacute;xima em pixels</span> <span style="margin: 0px; padding: 0px; color: #000088;">$largura</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #cc66cc;">150</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Altura m&aacute;xima em pixels</span> <span style="margin: 0px; padding: 0px; color: #000088;">$altura</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #cc66cc;">180</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Tamanho m&aacute;ximo do arquivo em bytes</span> <span style="margin: 0px; padding: 0px; color: #000088;">$tamanho</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #cc66cc;">1000</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Verifica se o arquivo &eacute; uma imagem</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #339933;">!</span><span style="margin: 0px; padding: 0px; color: #990000;">preg_match</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"/^image/(pjpeg|jpeg|png|gif|bmp)$/"</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #000088;">$foto</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"type"</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #000088;">$error</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">1</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"Isso n&atilde;o &eacute; uma imagem."</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Pega as dimens&otilde;es da imagem</span> <span style="margin: 0px; padding: 0px; color: #000088;">$dimensoes</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">getimagesize</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$foto</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"tmp_name"</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Verifica se a largura da imagem &eacute; maior que a largura permitida</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$dimensoes</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">0</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span> <span style="margin: 0px; padding: 0px; color: #339933;">&gt;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$largura</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #000088;">$error</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">2</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"A largura da imagem n&atilde;o deve ultrapassar "</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$largura</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">" pixels"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Verifica se a altura da imagem &eacute; maior que a altura permitida</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$dimensoes</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">1</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span> <span style="margin: 0px; padding: 0px; color: #339933;">&gt;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$altura</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #000088;">$error</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">3</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"Altura da imagem n&atilde;o deve ultrapassar "</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$altura</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">" pixels"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Verifica se o tamanho da imagem &eacute; maior que o tamanho permitido</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$foto</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"size"</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span> <span style="margin: 0px; padding: 0px; color: #339933;">&gt;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$tamanho</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #000088;">$error</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">4</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"A imagem deve ter no m&aacute;ximo "</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$tamanho</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">" bytes"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Se n&atilde;o houver nenhum erro</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #990000;">count</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$error</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #339933;">==</span> <span style="margin: 0px; padding: 0px; color: #cc66cc;">0</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Pega extens&atilde;o da imagem</span> <span style="margin: 0px; padding: 0px; color: #990000;">preg_match</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"/.(gif|bmp|png|jpg|jpeg){1}$/i"</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #000088;">$foto</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"name"</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #000088;">$ext</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Gera um nome &uacute;nico para a imagem</span> <span style="margin: 0px; padding: 0px; color: #000088;">$nome_imagem</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">md5</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #990000;">uniqid</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #990000;">time</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #339933;">.</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"."</span> <span style="margin: 0px; padding: 0px; color: #339933;">.</span> <span style="margin: 0px; padding: 0px; color: #000088;">$ext</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">1</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Caminho de onde ficar&aacute; a imagem</span> <span style="margin: 0px; padding: 0px; color: #000088;">$caminho_imagem</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"fotos/"</span> <span style="margin: 0px; padding: 0px; color: #339933;">.</span> <span style="margin: 0px; padding: 0px; color: #000088;">$nome_imagem</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Faz o upload da imagem para seu respectivo caminho</span> <span style="margin: 0px; padding: 0px; color: #990000;">move_uploaded_file</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$foto</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"tmp_name"</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #000088;">$caminho_imagem</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Insere os dados no banco</span> <span style="margin: 0px; padding: 0px; color: #000088;">$sql</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">mysql_query</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"INSERT INTO usuarios VALUES ('', '"</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$nome</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"', '"</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$email</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"', '"</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$nome_imagem</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"')"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Se os dados forem inseridos com sucesso</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$sql</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"Voc&ecirc; foi cadastrado com sucesso."</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Se houver mensagens de erro, exibe-as</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #990000;">count</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$error</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #339933;">!=</span> <span style="margin: 0px; padding: 0px; color: #cc66cc;">0</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">foreach</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$error</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">as</span> <span style="margin: 0px; padding: 0px; color: #000088;">$erro</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #000088;">$erro</span> <span style="margin: 0px; padding: 0px; color: #339933;">.</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"<br />"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span></span></pre> <p>Resumindo, n&oacute;s pegamos a imagem enviada, verificamos se ela est&aacute; dentro dos limites permitidos, depois jogamos essa foto na pasta fotos/ do servidor e na tabela de usu&aacute;rios do banco de dados adicionamos as informa&ccedil;&otilde;es do usu&aacute;rio juntamente com o nome da foto.</p> <p><strong>OBS:</strong> n&atilde;o esque&ccedil;a de dar pemiss&atilde;o de gravar na pasta onde ser&atilde;o gravadas as fotos.</p> <p>&nbsp;</p> <h2>4. Exibindo a imagem</h2> <p>Agora &eacute; simples. Vamos supor que queremos exibir as informa&ccedil;&otilde;es de todos os usu&aacute;rios, incluindo a foto:</p> <pre class="php" style="margin: 0px !important; padding: 0px !important; font-family: monospace; font-size: 12px; background-color: #e1e5e9; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; overflow: visible !important; line-height: 16px !important; width: auto !important; clear: none !important; -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important; color: #110000;"><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;"><!--?php</span-->&lt;? <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Seleciona todos os usu&aacute;rios</span> <span style="margin: 0px; padding: 0px; color: #000088;">$sql</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">mysql_query</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"SELECT * FROM usuarios ORDER BY nome"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Exibe as informa&ccedil;&otilde;es de cada usu&aacute;rio</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">while</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$usuario</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">mysql_fetch_object</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$sql</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <br /><span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Exibimos a foto</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"&lt; img src='fotos/"</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$usuario</span><span style="margin: 0px; padding: 0px; color: #339933;">-&gt;</span><span style="margin: 0px; padding: 0px; color: #004000;">foto</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"' alt='Foto de exibi&ccedil;&atilde;o' /&gt;&lt; br /&gt;"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Exibimos o nome e email</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"Nome: "</span> <span style="margin: 0px; padding: 0px; color: #339933;">.</span> <span style="margin: 0px; padding: 0px; color: #000088;">$usuario</span><span style="margin: 0px; padding: 0px; color: #339933;">-&gt;</span><span style="margin: 0px; padding: 0px; color: #004000;">nome</span> <span style="margin: 0px; padding: 0px; color: #339933;">.</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"&lt; br /&gt;"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"Email: "</span> <span style="margin: 0px; padding: 0px; color: #339933;">.</span> <span style="margin: 0px; padding: 0px; color: #000088;">$usuario</span><span style="margin: 0px; padding: 0px; color: #339933;">-&gt;</span><span style="margin: 0px; padding: 0px; color: #004000;">email</span> <span style="margin: 0px; padding: 0px; color: #339933;">.</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"&lt; br /&gt;&lt; br /&gt;"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span></span></pre> <p>&nbsp;</p> <h2>5. Excluindo imagem</h2> <p>E se for necess&aacute;rio excluir um usu&aacute;rio? Simples, utilizamos o comando delete e tudo certo, por&eacute;m a foto dele vai continuar l&aacute; na pasta fotos/ do nosso servidor. A solu&ccedil;&atilde;o &eacute; simples, utilizamos a fun&ccedil;&atilde;o <strong>unlink().</strong> Vamos supor que queremos remover o usu&aacute;rio de ID = 1 e sua respectiva foto:</p> <p><code><?<br />// ID de exemplo<br />$id = 1; <br />// Selecionando nome da foto do usuário<br />$sql = mysql_query("SELECT foto FROM usuarios WHERE id = '".$id."'");<br />$usuario = mysql_fetch_object($sql); <br />// Removendo usuário do banco de dados<br />$sql = mysql_query("DELETE FROM usuarios WHERE id = '".$id."'"); <br />// Removendo imagem da pasta fotos/unlink("fotos/".$usuario->foto."");<br />?> </code></p> <p>&nbsp;</p> <h2>6. Conclus&atilde;o</h2> <p>Podemos concluir que &eacute; muito simples fazer upload de uma imagem para o servidor, e n&atilde;o s&oacute; apenas imagem, poderia ser qualquer outro arquivo, s&oacute; mudaria o modo de valida&ccedil;&atilde;o. Espero que voc&ecirc;s tenham entendido, at&eacute; o pr&oacute;ximo artigo. Abra&ccedil;os.</p> <p>&nbsp;</p> <p><a href="https://www.oficinadanet.com.br/imagens/post/9062/upload_imagem.rar">Arquivos para download aqui</a></p>

Mais sobre: php mysql upload
Share Tweet
Recomendado
Comentários
Destaquesver tudo