XMLHttpRequest envío multipart/form-data

Question

que quieren usar XMLHttpRequest de JavaScript para poder hacer un formulario que incluye un elemento de entrada de tipo de archivo para que pueda evitar la actualización de la página y obtener XML útil espalda.

Puedo enviar el formulario sin actualizar la 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 de carga no se dispara, al menos no en Mozilla en OS X Leopard. Además, XMLHttpRequest sería un código de respuesta más bonito porque los datos devueltos podrían ser XML, no confinados a XHTML como es el caso con iframe.

presentación de los resultados del formulario en HTTP que se parece a:

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 llego método send del objeto XMLHttpRequest para duplicar la secuencia HTTP arriba?

Answer 1

Puede construir el '/ form-data multiparte' solicitud usted mismo (leer más sobre él en http://www.faqs.org/rfcs/rfc2388.html) y luego usar la send método (es decir. Xhr. send (your-multipart-form-data)). De manera similar, pero más fácil, en Firefox 4+ (también en Chrome y Safari 5+ 5+), puede utilizar la interfaz FormData que ayuda a construir tales peticiones. El método send es bueno para el contenido del texto, pero si desea enviar datos binarios, tales como imágenes, puede hacerlo con la ayuda del método sendAsBinary que ha existido partir de Firefox 3.0. Para más detalles sobre cómo enviar archivos a través de XMLHttpRequest, por favor refiérase a http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html.

Answer 2

no veo por qué marco flotante (un invisible uno) implica XHTML y no cualquier contenido. Si usa un iframe, puede establecer el evento onreadystatechange y esperar a que se complete. Luego podría usar frame.window.document.innerHTML (por favor, que 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 3

No hay ninguna manera de acceder a un campo de entrada de archivo dentro de Javascript por lo que no es un javascript única solución para la carga de archivos Ajax.

Hay solución como using an iframe.

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

Answer 4

Usted necesita para enviar a un iframe para conseguir que esto funcione, sólo tiene que añadir un atributo de destino a su formulario, donde se especifica el ID de marco flotante. Algo como esto:

 

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

Answer 5

soy confundir sobre el proceso de carga que ha especificado, que está en la página o en iframe ?, la primera respuesta es correcta theres ninguna manera de hacer esto utilizando puramente xmlhttprequest, si lo lo que quiere hacer es activar algún método una vez que exista la respuesta en iframe, simplemente verifique si ya tiene contenido o no usando DOM scripting, luego active el método.

para unir proceso de carga a la 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, nombre

Debe utilizar punto y coma, por ejemplo: Content-Disposition: form-data; nombrar

Answer 7

Aquí es una puesta al camino fecha utilizando FormData (full doc @MDN)

Guión:

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