
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>'; } } ?>
Até a próxima =D