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.
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.
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 $("#uploadForm").ajaxForm(options), , passando como parâmetro as opções acima.
Veja o código completo:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<title>Upload de arquivos com progresso usando com Ajax, jQuery e PHP</title>
<script>
$(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);
});
</script>
</head>
<body>
<h1>Validação de formulário com Ajax e PHP</h1>
<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
Arquivo para upload: <input name="myFile" id="user" type="file" />
<input type="submit" value="Enviar!" />
</form>
<div id="status" />
</body>
</html>
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:
<?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"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br>";
}
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"];
}
}
?>
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! ;)
