Por questões de segurança, os navegadores não permitem que o JavaScript acesse o sistema de arquivos do cliente, inviabilizando o upload via ajax no ambiente web. Assim, temos que criar alternativas para o upload assíncrono. Vários já criaram soluções para o problema, mas a maioria como funções autônomas. Como sou fã da Mootools, decidi criar a minha solução, e vou aproveitar para explicá-la aqui.
A Lógica
A lógica para essa “gambiarra” não é nova, já existe desde que o HTML é HTML. Existe o atributo target da tag form. Através dele, podemos escolher em que janela queremos que seja feita a submissão. Então a página não recarregará, e o resultado do formulário será carregado em outra janela.
Aí surge o primeiro porém: não queremos abrir uma nova janela (pop-ups são chatos, não concorda?)! Lembro que, nas minhas primeiras experiências com HTML e frames, podíamos fazer com que links abrissem em determinado frame através do mesmo atributo. Mas como também não queremos frames, vamos utilizar um irmão mais novo: o iframe.
Simplificando, a idéia é enviar o formulário para um iframe invisível, e recuperar a resposta quando este tiver terminado de carregar.
Preparando o Script
Desde o começo, pensei em fazer o script bem integrado à Mootools, como se fosse um plugin. Para isso, usei o mesmo processo utilizado para todas as funcionalidades relacionadas ao HTML: estendi a classe Element com um método upload:
1
2
3
4
5
| Element.extend({
"upload": function(options) {
if(this.getTag() != "form") return false
}
}) |
Também incluí uma pequena verificação na linha 3: se não for um formulário, não devemos submeter!
Criando o IFrame
Como não devemos deixar um iframe perdido pelo documento, vamos criá-lo pelo JavaScript também. Seguindo o código:
4
5
6
7
8
9
10
| var iFrame = new Element("iframe", {
"id": "fileUpload",
"name": "fileUpload",
"styles": { "display": "none" }
})
this.adopt(iFrame)
window.frames["fileUpload"].name = "fileUpload" // IE... Sempre ele... |
Para criá-lo, utilizei a classe Element, nativa da Mootools. Em uma chamada, já defini todos os atributos necessários. Primeiro, precisamos de um ID para localizarmos o iframe quando for necessário. O nome serve para o iframe ser identificado no target. O estilo só serve pra esconder o iframe.
Logo abaixo, fiz com que o formulário “adotasse” o iframe. Ele precisa estar em algum lugar para funcionar… Ah, e a correção made-for-IE, não esqueça dela!
Agora, precisamos saber quando o iframe carregou, para podermos disparar um callback com o retorno da requisição. Para isso, usamos o método addEvent, também da Mootools. No “load” do iframe, disparamos uma função onComplete, definida no parâmetro lá na definição da função.
11
12
13
14
15
16
| iFrame.addEvent("load", function() {
iFrame.removeEvent("load", arguments.callee) // removemos o evento, para que ele não dispare novamente
if($type(options.onComplete) == "function")
options.onComplete(iFrame.contentDocument.body.innerHTML)
iFrame.remove.delay(20, iFrame)
}) |
Note que usei a propriedade contentDocument para recuperar a resposta da requisição. Com a “Same Origin Policy” (Política de Mesma Origem), só conseguimos recuperar a resposta de requisições feitas dentro do mesmo domínio. Existem maneiras de se driblar isso, mas o script se tornaria muito menos versátil, pois não consegui uma forma de executar funções com a resposta.
Executado o papel do nosso iframe, não precisamos mais dele populando nosso HTML, mas não podemos removê-lo imediatamente, pois assim causaríamos um “loading” que não terminaria. Então “atrasei” a função em alguns milissegundos, evitando esse probleminha.
Adaptando o Formulário
Se estamos criando um script para isso, você não quer ir lá e definir todos os atributos manualmente, quer? Então fiz com que o próprio script cuidasse disso. Apenas defini o target, o encoding e o método do formulário (só por segurança, caso ele não tenha sidio definido):
17
18
19
20
21
22
23
| this.setProperties({
"target": "fileUpload",
"enctype": "multipart/form-data",
"encoding": "multipart/form-data",
"method": "post"
})
return this |
Código Completo
Juntando tudo isso, temos o código abaixo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| Element.extend({
"upload": function(options) {
if(this.getTag() != "form") return false
var iFrame = new Element("iframe", {
"id": "fileUpload",
"name": "fileUpload",
"styles": { "display": "none" }
})
this.adopt(iFrame)
window.frames["fileUpload"].name = "fileUpload"
iFrame.addEvent("load", function() {
iFrame.removeEvent("load", arguments.callee)
if($type(options.onComplete) == "function")
options.onComplete(iFrame.contentDocument.body.innerHTML)
iFrame.remove.delay(20, iFrame)
})
this.setProperties({
"target": "fileUpload",
"enctype": "multipart/form-data",
"encoding": "multipart/form-data",
"method": "post"
})
return this
}
}) |
Utilização
Para utilizar o código, é ainda mais simples. Basta definir, no onSubmit do formulário, nossa função:
$(window).addEvent("load", function() { // primeiro esperamos a janela carregar
$("form").addEvent("submit", function() {
this.upload({"onComplete": function(response) { alert(response) } })
})
})Se quiser ver um exemplo funcionando ou fazer download do script, veja Async Upload - Upload Assíncrono de Arquivos. E espero que eu tenha conseguido mostrar que há vida além de jQuery… Até mais!
Publiquei esse texto no 
):
