Como todos sabem, Upload com Ajax não é praticável em ambiente web. Existem várias restrições de segurança que impedem que o JavaScript acesse o sistema de arquivos do cliente e envie dados binários através de uma requisição XMLHttpRequest. No entanto, é possível (e sempre foi) fazer Upload Assíncrono de arquivos, utilizando uma técnica até antiga, muito bem explorada por muitos por aí.
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!
