Procurar por scripts de upload pode ser uma grande frustração. No Google encontramos códigos obsoletos, longos, difíceis de entender e difficiles de implementar.
Exemplo simples
Vou apresentar um código bem simples para upload.
- Crie o seguinte formulário, acrescentando atributo enctype=”multipart/form-data” no atributo <form>, isso fará com que o servidor aceite também sequencia binárias de dados. Acrescente também o atributo accept=”image/*” no elemento input type=”file” para que o formulário aceite somente imagens.
<form method="POST" enctype="multipart/form-data"> <label for="conteudo">Enviar imagem:</label> <input type="file" name="pic" accept="image/*"> <button type="submit">Enviar imagem</button> </form> - Agora crie o seguinte script PHP
<?php if(isset($_FILES['pic'])) { $ext = strtolower(substr($_FILES['pic']['name'],-4)); //Pegando extensão do arquivo $new_name = date("Y.m.d-H.i.s") . $ext; //Definindo um novo nome para o arquivo $dir = './imagens/'; //Diretório para uploads move_uploaded_file($_FILES['pic']['tmp_name'], $dir.$new_name); //Fazer upload do arquivo echo("Imagen enviada com sucesso!"); } ?> - Agora, crie uma pasta que será usada pelo script PHP para armazenar o arquivo enviado para o servidor, no exemplo acima a pasta criada se chama imagens. A pasta criada deve ficar junto com o arquivo de upload.
- Pronto!
Exemplo estilizado
Um exemplo mais completo pode ser criado, veja outro exemplo onde é possível visualizar a imagem enviada logo depois do envio.
<html>
<head>
<title>Upload de imagens</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div class="container">
<h2><strong>Envio de imagens</strong></h2><hr>
<form method="POST" enctype="multipart/form-data">
<label for="conteudo">Enviar imagem:</label>
<input type="file" name="pic" accept="image/*" class="form-control">
<div align="center">
<button type="submit" class="btn btn-success">Enviar imagem</button>
</div>
</form>
<hr>
<?php
if(isset($_FILES['pic']))
{
$ext = strtolower(substr($_FILES['pic']['name'],-4)); //Pegando extensão do arquivo
$new_name = date("Y.m.d-H.i.s") . $ext; //Definindo um novo nome para o arquivo
$dir = './imagens/'; //Diretório para uploads
move_uploaded_file($_FILES['pic']['tmp_name'], $dir.$new_name); //Fazer upload do arquivo
echo '<div class="alert alert-success" role="alert" align="center">
<img src="./imagens/' . $new_name . '" class="img img-responsive img-thumbnail" width="200">
<br>
Imagem enviada com sucesso!
<br>
<a href="exemplo_upload_de_imagens.php">
<button class="btn btn-default">Enviar nova imagem</button>
</a></div>';
} ?>
</div>
<body>
</html>
Downloads
Segue download do exemplo simples e do completo: upload_de_imagens_com_php
Plugins JQuery
Um plugin JQuery muito legal que uso em meus sistemas é o jQuery File Upload. Este plugin fantástico permite o envio de múltiplos arquivos e permite a visualização da imagem ainda no cache do navegador, antes do POST e exibe barras de progresso do upload…. fica a dica! O plugin é bem simples de usar e fácil de implementar.
Upload em servidores Linux
Em servidores Linux, é seguro usar a função chmod() para evitar que a imagem chegue a servidor com a permissão 600 ao invés de 644. Acrescente a função chmod() logo após a função move_upload_file() conforme exemplo:
move_uploaded_file($_FILES['pic']['tmp_name'], $dir.$new_name); //Fazer upload do arquivo
chmod("./imagens/" . $new_name, 644); //Corrige a permissão do arquivo.
