Nessa postagem de hoje, irei mostrar como criar através de um tutorial, um arquivo simples de upload de imagens, validando o tipo de arquivo, dimensões, tamanho e erros.
Vamos começar, primeiro passo, criar um html com um formulário para envio do arquivo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Upload de arquivos/imagens</title>
</head>
<body>
<form id="upload" method="post" enctype="multipart/form-data">
<ul>
<li>
<label for="arquivo">Selecione o arquivo</label>
<input type="file" id="arquivo" name="arquivo" accept="image/*" />
</li>
<li>
<input type="submit" id="enviar" value="Enviar" />
</li>
</ul>
</form>
</body>
</html>
IMPORTANTE: a opção enctype=”multipart/form-data” é obrigatória em formulários que serão utilizados para enviar arquivos.
A opção accept=”image/*” presente no campo do tipo file, ajuda a limitar a seleção de arquivos para somente imagens.
Para não ficar muito simples o formulário de envio, irei adicionar uma formatação para deixar a seleção de arquivo e o envio mais interessante através desse CSS:
<style type="text/css">
body {
font: 14px "Lucida Grande", Verdana, sans-serif;
padding: 0;
margin: 0;
}
#upload {
float: left;
width: 100%;
display: block;
padding: 10px;
box-sizing: border-box;
}
#upload ul {
list-style: none;
}
#upload li {
float: left;
margin-bottom: 10px;
display: block;
clear: left;
}
#enviar {
color: #FFF;
font-weight: bold;
text-transform: uppercase;
width: 150px;
height: 30px;
display: block;
border: 0 none;
background: #F90;
}
</style>
Bom, agora é com o PHP, no inicio desse arquivo, irei adicionar tudo que será necessário para realizar as verificações e o upload da imagem, mas primeiro, vamos adicionar alguns itens necessários em nosso formulário e css, o primeiro item é adicionar a informação no action do formulário para que o formulário seja enviado para essa mesma página.
<form id=”upload” method=”post” enctype=”multipart/form-data” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”>
Adicionaremos também o seguinte bloco de conteúdo acima do formulário:
<?php if(isset($erros)) { ?>
<div id="erros">
<p>Erro (s) ao enviar o arquivo:</p>
<?php foreach($erros as $e) { ?>
<ul>
<li>
<p><?php echo $e; ?></p>
</li>
</ul>
<?php
}
?>
</div><!-- #erros -->
<?php } ?>
Adiciono uma formatação para as mensagens de erro:
#erros {
float: left;
width: 100%;
display: block;
padding: 10px;
border-bottom: solid 1px #CCC;
margin-bottom: 10px;
box-sizing: border-box;
}
#erros p {
color: #900;
}
Agora sim, vamos iniciar o script PHP.
<?php
/* VERIFICO SE HOUVE O ENVIO DE UM ARQUIVO */
if(count($_FILES) > 0) {
/* RECUPERO TODAS AS INFORMAÇÕES POSSÍVEIS DO ARQUIVO */
$nome = $_FILES['arquivo']['name'];
$tamanho = $_FILES['arquivo']['size'];
$tipo = $_FILES['arquivo']['type'];
$nome_temp = $_FILES['arquivo']['tmp_name'];
$erros = array();
/* VERIFICO SE O ARQUIVO ENVIADO É DO TIPO IMAGEM */
if($tipo == 'image/jpeg' || $tipo == 'image/jpg' || $tipo == 'image/gif' || $tipo == 'image/bmp') {
/*
VERIFICO SE O TAMANHO NÃO ULTRAPASSA 2Mb
O CALCULO DEVE SER REALIZADO EM BYTES.
*/
if($tamanho <= 2097152) {
$pasta = './arquivos/';
/* VERIFICO SE A PASTA NÃO EXISTE, SE ELA NÃO EXISTIR, EU CRIO A PASTA */
if(!file_exists($pasta)) {
mkdir($pasta, 0777);
}
/*
TENTO ENVIAR O ARQUIVO PARA A PASTA arquivos QUE ESTÁ LOCALIZADA NA RAIZ DO MEU PROJETO
*/
if(move_uploaded_file($nome_temp, $pasta.$nome)) {
/* SE ESTIVER TUDO OK, REDIRECIONO PARA UMA PÁGINA DE SUCESSO */
header('location: sucesso.php');
} else {
$erros['pasta'] = 'Ocorreu um erro ao enviar o arquivo para a pasta correta';
}
} else {
$erros['tamanho'] = 'Esse arquivo é maior que o permitido, o tamanho máximo permitido é de: <strong>2Mb</strong>';
}
} else {
$erros['tipo'] = 'Esse arquivo não é um arquivo suportado pelo sistema, os tipos suportados são: <strong>jpg, jpeg, gif e bmp</strong>';
}
}
?>
Download dos arquivos.
Até a próxima =D
