¿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 respuestasLosXMLHttpRequest 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 ...