do cliente temos uma pagina simples HTML. Nela definimos um form, que contem um campo do tipo file para que o usuario possa escolher o arquivo para upload e tambem temos um botao de submit. Ate ai, nada demais. A magica acontece gracas ao jQuery. Para este tutorial, utilizamos o plugin jQuery Form, que possibilita o uso de chamadas Ajax em formularios HTML de forma bastante simples. Primeiramente, e necessario incluir as bibliotecas javascript do jQuery e do jQuery Form Plugin. Utilizei para este exemplo as bibliotecas disponiveis no googlepais e github, mas voce pode (e geralmente deve) baixa-las para o seu servidor e fazer referencia a elas.Apos isso, nos definimos um objeto do tipo Options, especificado pelo jQuery Forms Plugin, que contera atributos referentes a chamada Ajax. Para o nosso exemplo, nos especificamos funcoes de callback:beforeSend: Funcao chamada imediatamente antes do envio do formulario. Geralmente usadas para esquemas de validacao pre-submissao. No nosso caso, apenas exibimos uma mensagem via alert.uploadProgress: Funcao callback a ser invocada com as informacoes do progresso do upload. Aqui nos atualizamos uma div com o percentual do upload concluido.success: Define a funcao de callback a ser chamada apos o envio do formulario. Aqui, apenas um alert sera exibido.error: Funcao chamada em caso de erro.Por fim, preparamos o nosso form para ser submetido via Ajax com a chamada $("#uploadForm").ajaxForm(options), , passando como parametro as opcoes acima.Veja o codigo 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>Validacao de formulario 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> Codigo do Lado do ServidorO codigo server-side e uma funcao 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 atraves da funcao move_uploaded_file.Veja o codigo 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"]; } } ?> Entao, pessoal, espero que esse tutorial tenha ajudado voces a conhecerem um pouco mais do poder do jQuery e da sua integracao com uma linguagem server-side - no caso, PHP. Duvidas, sugestoes ou criticas? Deixe um comentario! ;)