Como fazer upload de imagens e arquivos com PHP, fácil, fácil.


Procurar por scripts de upload pode ser uma grande frustração. No Google encontramos códigos obsoletos, longos, difíceis de entender e difíceis de implementar.

Exemplo simples

Vou apresentar um código bem simples para upload.

  1. 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>
  2. 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!");
     } 
    ?>
  3. 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.
  4. Pronto!

Exemplo estilizado com BootStrap e Google Fonts

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>

O resultado será semelhante ao mostrado na imagem a seguir;

 

 

Downloads

Segue download do exemplo simples e do completo: upload_de_imagens_com_php

Plugins JQuery

Um plugin JQuery muito legal é 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.

Nota 5

5 de 5

(baseado em 39 votos)

Deixe seu comentário