¿Cómo enviar objetos FormData con solicitudes Ajax en jQuery? [duplicar

Esta pregunta ya tiene una respuesta aquí:

Enviando multipart / formdata con jQuery.ajax 12 respuestas

LosXMLHttpRequest Nivel 2 standard (todavía un borrador de trabajo) define elFormData interfaz. Esta interfaz permite agregarFile objetos para solicitudes XHR (solicitudes Ajax).

Por cierto, esta es una característica nueva: en el pasado, se usaba el "truco oculto de iframe" (lea sobre eso enmy otra pregunta).

Así funciona (ejemplo):

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

dóndeinput es un<input type="file"> field yhandler es el controlador de éxito para la solicitud Ajax.

Esto funciona de maravilla en todos los navegadores (de nuevo, excepto IE).

Ahora, me gustaría hacer que esta funcionalidad funcione con jQuery. Intenté esto:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

Desafortunadamente, eso no funcionará (se genera un error de "invocación ilegal" -screenshot está aquí). Supongo que jQuery espera un objeto clave-valor simple que represente nombres / valores de campo de formulario, y elFormData la instancia que estoy pasando es aparentemente incompatible.

Ahora, ya que es posible pasar unFormData instancia enxhr.send(), Espero que también sea posible hacer que funcione con jQuery.

Actualizar

He creado un "ticket de función" en jQuery's Bug Tracker. Esta aquí:http: //bugs.jquery.com/ticket/999

Me sugirieron usar un "prefiltro Ajax" ...

Actualizar

n primer lugar, permítanme dar una demostración que demuestre qué comportamiento me gustaría lograr.

HTML:

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

JavaScript:

$( 'form' ).submit(function ( e ) {
    var data, xhr;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    xhr = new XMLHttpRequest();

    xhr.open( 'POST', 'http://hacheck.tel.fer.hr/xml.pl', true );
    xhr.onreadystatechange = function ( response ) {};
    xhr.send( data );

    e.preventDefault();
});

El código anterior da como resultado esta solicitud HTTP:

Esto es lo que necesit - ¡Quiero ese tipo de contenido "multipart / form-data"!

La solución propuesta sería así:

$( 'form' ).submit(function ( e ) {
    var data;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            alert( data );
        }
    });

    e.preventDefault();
});

Sin embargo, esto da como resultado:

Como puede ver, el tipo de contenido es incorrecto ...

Respuestas a la pregunta(9)

Su respuesta a la pregunta