Tutorial upload de arquivos com jQuery e PHP
Autor: Bruno Nunes | Publicado: 2014-01-15T22:05:00-03:00

E aí pessoal, beleza? Dessa vez vamos aprender como implementar a funcionalidade de upload de arquivos utilizando PHP e jQuery. O jQuery (http://jquery.com/) é uma biblioteca Javascript que busca simplificar a implementação de tarefas como manipulação de HTML, tratamento de eventos, animação, Ajax, etc. No nosso artigo usaremos o jQuery basicamente para recuperar o status corrente do upload através de chamadas assíncronas ao servidor.


Visão Geral deste Tutorial

Como já adiantamos, o tutorial consiste de uma página com um campo para upload de arquivos. O arquivo escolhido será enviado via Ajax ao servidor, que, por sua vez, retornará para o cliente o percentual do arquivo que já foi copiado. Este valor será atualizado automaticamente e será exibido em uma div para o usuário.&nbsp;


Código do Lado do Cliente

No lado do cliente temos uma página simples HTML. Nela definimos um form, que contém um campo do tipo file para que o usuário possa escolher o arquivo para upload e também temos um botão de submit. Até aí, nada demais. A mágica acontece graças ao jQuery. Para este tutorial, utilizamos o plugin jQuery Form, que possibilita o uso de chamadas Ajax em formulários HTML de forma bastante simples.&nbsp;



Primeiramente, é necessário incluir as bibliotecas javascript do jQuery e do jQuery Form Plugin. Utilizei para este exemplo as bibliotecas disponíveis no googlepais e github, mas você pode (e geralmente deve) baixá-las para o seu servidor e fazer referência a elas.



Após isso, nós definimos um objeto do tipo Options, especificado pelo jQuery Forms Plugin, que conterá atributos referentes à chamada Ajax. Para o nosso exemplo, nós especificamos funções de callback:



beforeSend: Função chamada imediatamente antes do envio do formulário. Geralmente usadas para esquemas de validação pré-submissão. No nosso caso, apenas exibimos uma mensagem via alert.



uploadProgress: Função callback a ser invocada com as informações do progresso do upload. Aqui nós atualizamos uma div com o percentual do upload concluído.



success: Define a função de callback a ser chamada após o envio do formulário. Aqui, apenas um alert será exibido.



error: Função chamada em caso de erro.



Por fim, preparamos o nosso form para ser submetido via Ajax com a chamada&nbsp;$("#uploadForm").ajaxForm(options), &nbsp;, passando como parâmetro as opções acima.



Veja o código completo:
 &lt;html&gt;  
  &lt;head&gt;  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;  
  &lt;script src="http://malsup.github.com/jquery.form.js"&gt;&lt;/script&gt;  
  &lt;title&gt;Upload de arquivos com progresso usando com Ajax, jQuery e PHP&lt;/title&gt;  
  &lt;script&gt;  
      $(document).ready(function() {  
           var options = {  
                beforeSend: function() {  
                     alert("Antes de mandar!");  
                },  
                uploadProgress: function(event, position, total, percentComplete) {                      
                     $("#status").html("Percentual completado: " + percentComplete + "%");  
                },  
                success: function() {  
                     alert("Upload concluido!");  
                },  
                error: function() {  
                     alert("Falha ao fazer upload de arquivo.");  
                }  
           };  
           $("#uploadForm").ajaxForm(options);  
      });  
  &lt;/script&gt;  
  &lt;/head&gt;  
  &lt;body&gt;  
 &lt;h1&gt;Validação de formulário com Ajax e PHP&lt;/h1&gt;  
 &lt;form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data"&gt;  
  Arquivo para upload: &lt;input name="myFile" id="user" type="file" /&gt;  
  &lt;input type="submit" value="Enviar!" /&gt;  
 &lt;/form&gt;  
 &lt;div id="status" /&gt;  
 &lt;/body&gt;  
 &lt;/html&gt;  




Código do Lado do Servidor

O código server-side é uma função simples de upload de arquivos em PHP. Basicamente, o servidor recebe o arquivo no objeto $_FILES e o copia para a pasta /upload/ na raiz do site através da função move_uploaded_file.



Veja o código do arquivo upload.php:
 &lt;?php  
 define ('SITE_ROOT', realpath(dirname(__FILE__)));  
 //upload.php  
 $output_dir = "/upload/";  
 if(isset($_FILES["myFile"]))  
 {  
   //Filter the file types , if you want.  
   if ($_FILES["myFile"]["error"] &gt; 0)  
   {  
    echo "Error: " . $_FILES["file"]["error"] . "&lt;br&gt;";  
   }  
   else  
   {  
     //move the uploaded file to uploads folder;  
     move_uploaded_file($_FILES["myFile"]["tmp_name"],SITE_ROOT. $output_dir. $_FILES["myFile"]["name"]);  
    echo "Uploaded File :".$_FILES["myFile"]["name"];  
   }  
 }  
 ?&gt;  



Então, pessoal, espero que esse tutorial tenha ajudado vocês a conhecerem um pouco mais do poder do jQuery e da sua integração com uma linguagem server-side - no caso, PHP. Dúvidas, sugestões ou críticas? Deixe um comentário! ;)