javascript - formdata - XMLHttpRequest POST multipart/form-data

xmlhttprequest javascript example

Question

Quiero usar XMLHttpRequest en JavaScript para PUBLICAR un formulario que incluya un elemento de entrada de tipo de archivo para poder evitar la actualización de la página y recuperar el XML útil.

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 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 limitados a XHTML como es el caso con iframe.

Enviar los resultados del formulario en HTTP que se ve así:

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 la secuencia HTTP anterior?

Answer 1

Deberá realizar una POST en un IFrame para que funcione, simplemente agregue un atributo de destino a su formulario, donde especificará la ID de IFrame. Algo como esto:

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

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 de solo javascript para la carga de archivos ajax.

Hay una solución alternativa como usar 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 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 4

Estoy confundido sobre el evento de carga que usted especificó, está en la página o en el iframe ?, la primera respuesta es correcta, no hay manera de hacerlo utilizando purely xmlhttprequest, si lo que quiere lograr es activar algún método una vez que la respuesta existe en iframe, simplemente verifique si ya tiene contenido o no usando DOM scripting, 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 5

Content-Disposition: form-data, name

Debe usar punto y coma, así: Content-Disposition: form-data; nombre

Answer 6

Puede construir la solicitud ''multipart / form-data'' usted mismo (lea más sobre esto en http://www.faqs.org/rfcs/rfc2388.html ) y luego use el método de send (es decir, xhr.send (your- multipart-form-data)). Del mismo modo, pero más fácil, en Firefox 4+ (también en Chrome 5+ y Safari 5+) puede usar la interfaz FormData que ayuda a construir dichas solicitudes. El método de 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 comenzó con Firefox 3.0. Para obtener más información sobre cómo enviar archivos a través de XMLHttpRequest , consulte http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html .