XMLHttpRequest POST concatenada / forma-dados

Question

Eu quero usar XMLHttpRequest em JavaScript para postar um formulário que inclui um elemento de entrada de tipo de arquivo para que eu possa evitar a atualização da página e voltar XML útil.

Eu posso enviar o formulário sem atualização da página, usando JavaScript para definir o atributo de destino no formulário para um iframe para MSIE ou um objeto para o Mozilla, mas esta tem dois problemas. O problema menor é que a meta não é compatível com W3C (que é por isso que eu colocá-lo em JavaScript, não em XHTML). O grande problema é que o evento onload não dispara, pelo menos não no Mozilla no Mac OS X Leopard. Além disso, XMLHttpRequest faria para código de resposta mais bonita, porque os dados retornados poderia ser XML, não se limita a XHTML como é o caso com iframe.

Submeter os resultados do formulário em HTTP que se parece com:

Content-Type: multipart/form-data;boundary=<boundary string>
Content-Length: <length>
--<boundary string>
Content-Disposition: form-data, name="<input element name>"

<input element value>
--<boundary string>
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>"
Content-Type: application/octet-stream

<element body>

Como faço para obter método de envio do objeto XMLHttpRequest para duplicar o acima HTTP stream?

Answer 1

Você pode construir o 'multipart / form-data' pedido yourself (leia mais sobre isso em http : (. ou seja xhr.send (o-concatenada-forma-dados) //www.faqs.org/rfcs/rfc2388.html ) e, em seguida, usar o método send). Da mesma forma, mas mais fácil, no Firefox 4+ (também no Chrome 5+ e Safari 5+) você pode usar o FormData interface que ajuda a construir tais pedidos. O método send é bom para conteúdo de texto, mas se você quiser enviar dados binários, como imagens, você pode fazê-lo com a ajuda do método sendAsBinary que tem sido em torno começando com Firefox 3.0. Para obter detalhes sobre como enviar arquivos via XMLHttpRequest, consulte http: //blog.igstan.ro/2009/01/pure-javascript-file-upload.html .

Answer 2

Não há qualquer forma de acesso de um campo de entrada de arquivo dentro de javascript de modo que não é um javascript única solução para ajax upload de arquivos.

Existem solução alternativa como usando um iframe .

A outra opção seria usar algo como SWFUpload ou Google Gears

Answer 3

Eu não vejo porque iframe (um invisível) implica XHTML e não o conteúdo ANY. Se você usar um iframe você pode definir o evento onreadystatechange e esperar por 'completo'. Em seguida, você poderia usar frame.window.document.innerHTML (por favor, alguém me corrija) para obter o resultado string.

var lFrame = document.getElementById('myframe');
lFrame.onreadystatechange = function()
{
   if (lFrame.readyState == 'complete')
   {
      // your frame is done, get the content...
   }
};

Answer 4

Você vai precisar de POST para um IFrame para chegar a este trabalho, basta adicionar um atributo de destino para o formulário, onde você especificar o IFrame ID. Algo parecido com isto:

<form method="post" target="myiframe" action="handler.php">
...
</form>
<iframe id="myiframe" style="display:none" />

Answer 5

Estou confuso sobre o evento onload que você especificou, é sobre a página ou em iframe ?, a primeira resposta é theres corretas nenhuma maneira de fazer isso usando puramente xmlhttprequest, se o que você quer acheive está provocando algum método uma vez que a exist resposta em iframe, simplesmente verificar se ele tem conteúdo já ou não usando DOM scripting, em seguida, disparar o método.

para anexar onload evento para o iframe

if(window.attachEvent){
 document.getElementById(iframe).attachEvent('onload', some_method);
}else{
 document.getElementById(iframe).addEventListener('load', some_method, false);
} 

Answer 6

Content-Disposition: form-data, nome

Você deve usar ponto e vírgula, assim: Content-Disposition: form-data; nome

Answer 7

Aqui está uma atualizada maneira usando FormData ( completo doc @MDN )

Script:

var form = document.querySelector('#myForm');
form.addEventListener("submit", function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", this.action);
    xhr.addEventListener("load", function(e) {
        // Your callback
    });

    xhr.send(new FormData(this));

    e.preventDefault();
});

(desta forma básica)

<form id="myForm" action="..." method="POST" enctype="multipart/form-data">
    <input type="file" name="file0">
    <input type="text" name="some-text">
    ...
</form>

Obrigado novamente a Alex Polo para sua resposta