XMLHttpRequest POST multipart / form-data

Question

Quiero usar XMLHttpRequest en JavaScript para POSTAR un formulario que incluya un elemento de entrada de tipo de archivo para que pueda evitar la actualización de la página y obtener un XML útil de vuelta.

Puedo enviar el formulario sin actualización de página, usando JavaScript para establecer el atributo de destino en el formulario a un iframe para MSIE o un objeto para Mozilla, pero esto tiene dos problemas. El problema menor es que el objetivo no es compatible con W3C (por eso lo configuro en JavaScript, no en XHTML). El principal problema es que el evento onload no se activa, al menos no en Mozilla en OS X Leopard. Además, XMLHttpRequest haría un código de respuesta más bonito porque los datos devueltos podrían ser XML, no limitados a XHTML como es el caso con iframe.

El envío de los resultados del formulario en HTTP es similar al siguiente:

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>

¿Cómo obtengo el método de envío del objeto XMLHttpRequest para duplicar el flujo HTTP anterior?

Answer 1

Usted puede construir la solicitud 'multipart / form-data' (lea más sobre esto en http : //www.faqs.org/rfcs/rfc2388.html ) y luego use el método send (es decir, xhr.send (su-multipart-form-data)). De manera similar, pero más fácil, en Firefox 4+ (también en Chrome 5+ y Safari 5+) puede usar FormData interfaz que ayuda a construir tales solicitudes. El método send es bueno para el contenido de texto, pero si desea enviar datos binarios como imágenes, puede hacerlo con la ayuda del método sendAsBinary que ha estado por comenzar. con Firefox 3.0. Para obtener detalles sobre cómo enviar archivos a través de XMLHttpRequest , consulte http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html .

Answer 2

No hay ninguna forma de acceder a un campo de entrada de archivo dentro de javascript, por lo que no hay una solución solo para javascript para subir archivos ajax.

Hay soluciones alternativas como utilizando un iframe .

La otra opción sería usar algo como SWFUpload o Google Gears

Answer 3

No veo por qué iframe (uno invisible) implica XHTML y no CUALQUIER contenido. Si usa un iframe, puede configurar el evento onreadystatechange y esperar a que se complete. A continuación, puede usar frame.window.document.innerHTML (por favor, alguien me corrija) para obtener el resultado de la cadena.

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

Answer 4

Necesitará POST a un IFrame para que esto funcione, simplemente agregue un atributo de destino a su formulario, donde especifique el ID de IFrame. Algo como esto:

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

Answer 5

estoy confundido acerca del evento onload que especificó, ¿está en la página o en iframe? la primera respuesta es correcta, no hay manera de hacerlo utilizando únicamente la solicitud xmlhttprequest, si lo que desea lograr es activar algún método una vez que la respuesta existe en el iframe, simplemente verifique si ya tiene contenido o no está usando scripts DOM, luego active el método.

para adjuntar el evento onload al iframe

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

Answer 6

  

Disposición del contenido: datos de formulario, nombre

Debería usar punto y coma, así: Disposición de contenido: datos de formulario; nombre

Answer 7

Aquí hay una forma actualizada 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();
});

(de esta 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>

Gracias de nuevo a Alex Polo por su respuesta