Upload de imagens com PHP

Uma parte bastante importante do seu código PHP é o envio de arquivos para o servidor. É importante que você entenda como manipular arquivos assim que eles são enviados.

Neste artigo você vai aprender a criar um formulário muito simples para upload de imagens com PHP.

O formulário HTML

Para o formulário HTML, é importante prestar bastante atenção nos atributos que você vai configurar, veja:

<form enctype="multipart/form-data" action="arquivo_de_envio.php" method="post">

São elas:

enctype="multipart/form-data"

Indica que você vai enviar arquivos para o servidor, se não tiver este atributo você só vai conseguir enviar texto.

action="arquivo_de_envio.php"

Aqui você indica o arquivo que vai receber a postagem dos arquivos (e texto se tiver).

method="post"

O método de envio.

Veja como ficou nosso formulário simples:

<form enctype="multipart/form-data" action="arquivo_de_envio.php" method="post">
	<input name="userfile[]" type="file" multiple /><br />
	<input type="submit" value="Enviar" />
</form>

Perceba no input, os atributos name="userfile[]", type="file" e multiple.

  • O atributo "name" recebeu chaves porque vou enviar vários arquivos, não apenas um.
  • O atributo "type" indica que vou enviar arquivos (file)
  • O atributo "multiple" indica que posso selecionar vários arquivos ao mesmo tempo (ou apenas um).

Vamos utilizar o formulário indicado acima para enviar nossos dados, porém, vou deixar o atributo "action" em branco, já que vou enviar tudo para o mesmo arquivo.

Veja:

<form enctype="multipart/form-data" action="" method="post">
	<input name="userfile[]" type="file" multiple /><br />
	<input type="submit" value="Enviar" />
</form>

O PHP

Para o PHP, não vamos utilizar o método convencional já que vou enviar vários arquivos.

A primeira coisa que vou fazer é verificar se algo foi postado:

<?php
if ( 
	     isset( $_FILES['userfile'] )
	&& ! empty( $_FILES['userfile'] )  
) {
    // O resto vem aqui
}

Conforme descrito no comentário do trecho anterior, vamos colocar os dados onde ele está.

Agora vamos configurar algumas variáveis para receber os dados enviados pelo formulário.

$imagens         = $_FILES['userfile'];
$nomes_imagens   = $imagens['name'];
$tipos_imagens   = $imagens['type'];
$tmp_imagens     = $imagens['tmp_name'];
$erro_imagens    = $imagens['error'];
$tamanho_imagens = $imagens['size'];

As chaves indicadas acima são padrão.

  • name = nome
  • type = mime type
  • tmp_name = nome temporário
  • error = se ocorrer algum erro no envio
  • size = tamanho em bytes

Para este demo, vamos fazer algumas verificações sobre o arquivo enviado, a começar pelo tipo. Por isso, vamos criar um array onde colocaremos os tipos permitidos.

$permitir_tipos  = array(
	'image/bmp', 
	'image/x-windows-bmp', 
	'image/gif', 
	'image/jpeg', 
	'image/pjpeg',
	'image/png',
);

Agora vamos fazer um laço para percorrer o array de dados enviados:

for ( $i = 0; $i < count( $erro_imagens ); $i++ ) {
	if ( $erro_imagens[$i] != 0 ) {
		echo 'Erro ao enviar imagem ' . $nomes_imagens[$i];
	} else {
		if ( in_array( $tipos_imagens[$i], $permitir_tipos ) ) {
			if ( @move_uploaded_file( $tmp_imagens[$i], 'imagens/' . $nomes_imagens[$i] ) ) {
				echo '<img src="imagens/' . $nomes_imagens[$i] . '" style="width: 200px; height: auto;">';
			} else {
				echo 'Erro ao enviar imagem!';
			}
		} else {
			echo 'Envie apenas imagens.';
		}
	}
}

Dentro do laço, checamos se os tipos enviados estão dentro dos tipos das imagens, se existe algum erro, e se a imagem foi enviada com sucesso. Caso tudo ocorra conforme previsto, a imagem é movida para a pasta "imagens" e, em seguida, apresentada na tela do navegador.

Código completo

Veja abaixo como ficou nosso código completo:

<form enctype="multipart/form-data" action="" method="post">
	<input name="userfile[]" type="file" multiple /><br />
	<input type="submit" value="Enviar" />
</form>

<?php
// Verifica se algo foi enviado
if ( 
	     isset( $_FILES['userfile'] )
	&& ! empty( $_FILES['userfile'] )  
) {
	// Configura as variáveis
	$imagens         = $_FILES['userfile'];
	$nomes_imagens   = $imagens['name'];
	$tipos_imagens   = $imagens['type'];
	$tmp_imagens     = $imagens['tmp_name'];
	$erro_imagens    = $imagens['error'];
	$tamanho_imagens = $imagens['size'];
	
	// Os mime types permitidos
	$permitir_tipos  = array(
		'image/bmp', 
		'image/x-windows-bmp', 
		'image/gif', 
		'image/jpeg', 
		'image/pjpeg',
		'image/png',
	);
	
	// Verifica se a variável de erro contém um array
	if ( ! is_array( $erro_imagens ) ) {
		exit('Nada enviado!');
	}
	
	// O laço 
	for ( $i = 0; $i < count( $erro_imagens ); $i++ ) {
	
		// Verifica se ocorreu algum erro
		if ( $erro_imagens[$i] != 0 ) {
		
			// Mostra o erro
			echo 'Erro ao enviar imagem ' . $nomes_imagens[$i];
		
		} else {
		
			// Verifica se os mime types estão entre os permitidos
			if ( in_array( $tipos_imagens[$i], $permitir_tipos ) ) {
			
				// Verifica se o arquivo foi movido com sucesso (e move)
				if ( @move_uploaded_file( $tmp_imagens[$i], 'imagens/' . $nomes_imagens[$i] ) ) {
					
					// Mostra a imagem
					echo '<img src="imagens/' . $nomes_imagens[$i] . '" style="width: 200px; height: auto;">';
				
				} else {
				
					// Mostra o erro no envio
					echo 'Erro ao enviar imagem!';
				}
				
			} else {
				
				// Mostra o erro de tipos
				echo 'Envie apenas imagens.';
			
			} // Fim dos tipos permitidos
			
		} // Fim - Verifica se ocorreu algum erro
		
	} // Fim - O laço
} // Fim - Verifica se algo foi enviado
?>

É um formulário bem simples, mas serve para você entender como funciona o envio de arquivos para o servidor.

Com Ajax

Caso queira adaptar a validação desse formulário para Ajax, basta seguir nosso tutorial:

O formulário do artigo acima não tem validação nas imagens, você deverá fazer isso utilizando os códigos detalhados anteriormente neste tutorial.

Download

Caso queira baixar o código gerado neste tutorial, basta acessar o link abaixo:

Concluindo

Este não é um formulário para você utilizar em sites profissionais ou em produção, é apenas educativo, portanto, antes de utiliza-lo em algum projeto, avalie-o.

Caso tenha alguma dúvida, deixe um comentário.