Já havia tempo que eu queria escrever esse script, mas a coragem faltava, até que ele me foi necessário. Como uso Mootools, não faria sentido usar funções autônomas, desperdiçando código. Então tomei coragem e fiz. Pronto, nem doeu…

O Código

Meu objetivo, nesse post, não é explicar a lógica por trás do script (farei isso em breve), mas sim deixar o código pronto, e explicar seu uso.

Antes de tudo, você precisará da Mootools com os módulos necessários, o que suponho que você já possua. Depois, faça o download do Async Upload. Agora, basta incluir os dois scripts em sua página.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="asyncUpload.js"></script>

Utilização

Como não podia deixar de ser, o script funciona na submissão de um formulário. Ele a intercepta e a envia para um iframe escondido. Pra que tudo isso funcione, temos que definir isso no onSubmit de nosso formulário:

$(window).addEvent("load", function() { // quando terminar de carregar...
  $("seu-formulario").addEvent("submit", function() { // e o nosso formulário for enviado...
    this.upload() // fazemos nosso upload, parecido (mas não é) com Ajax
  })
}

E cadê a URL?

Como a Mootools nos dá muitas opções para trabalhar com DOM, não precisamos definir a URL no script. Essa URL vai ser retirada do próprio formulário, no action:

<form action="http://sua-url-para-envio/upload.php" id="seu-formulario">
  <input type="file" name="fileToUpload" id="fileToUpload" />
</form>

Elemento de Retorno

Muito melhor do que elementos de retorno, podemos definir uma função para tratar o retorno do upload. Para isso, passamos um parâmetro para a função:

$(window).addEvent("load", function() {
  $("seu-formulario").addEvent("submit", function() {
    this.upload({
      "onComplete": function(response) {
        $("elemento_de_retorno").setHTML(response)
      }
    })
  })
}

Com o código acima, o resultado da requisição iria para uma div (ou algum outro elemento) de id “elemento_de_retorno”. É claro, pode-se fazer muito mais, mas fica a seu cargo decidir…

Recebendo o Arquivo

Apesar de assíncrono (ou Ajax disfarçado), esse upload funciona como um upload comum. No PHP, por exemplo, podemos receber o arquivo assim:

move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "nome_do_arquivo.txt");

Exemplo e Download

Caso queira dar uma olhada, deixei um exemplo na página de downloads. Faça upload de um arquivo qualquer e veja o funcionamento! Caso deseje saber a lógica por trás de tudo isso, aguarde os próximos posts. Até mais!

Posts Relacionados

• Ajax com a Mootools
• Mootools – Eventos
• Mootools – Chain
• Mootools – Classes
• Mootools – Menu Sanfona