Como enviar objetos FormData com solicitações Ajax no jQuery? [duplicado
Esta pergunta já tem uma resposta aqui:
Enviar multipart / formdata com jQuery.ajax 12 respostasOXMLHttpRequest Nível 2 standard (ainda um rascunho de trabalho) define oFormData
interface. Essa interface permite anexarFile
objetos para solicitações XHR (solicitações Ajax
Aliás, esse é um novo recurso - no passado, o "truque de iframe oculto" era usado (leia sobre isso emmy outra pergunta).
É assim que funciona (exemplo):
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 );
Ondeinput
é um<input type="file">
campo ehandler
é o manipulador de sucesso da solicitação do Aja
sso funciona perfeitamente em todos os navegadores (novamente, exceto no IE
Agora, eu gostaria de fazer essa funcionalidade funcionar com jQuery. Eu tentei o seguinte:
var fd = new FormData();
fd.append( 'file', input.files[0] );
$.post( 'http://example.com/script.php', fd, handler );
Infelizmente, isso não funciona (um erro de "Invocação ilegal" é gerado -screenshot está aqui). Suponho que o jQuery espera um objeto simples de valor-chave que represente nomes de campos de formulário / valores e oFormData
instância que estou passando é aparentemente incompatíve
Agora, já que é possível passar umFormData
instância emxhr.send()
, Espero que também seja possível fazê-lo funcionar com o jQuer
Atualizar
Eu criei um "ticket de recurso" no Bug Tracker do jQuery. Está aqui:http: //bugs.jquery.com/ticket/999
Fui sugerido para usar um "pré-filtro Ajax" ...
Atualizar
Primeiro, deixe-me dar uma demonstração demonstrando que comportamento eu gostaria de alcança
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();
});
O código acima resulta nesta solicitação HTTP:
Isto é o que eu precis - Quero esse tipo de conteúdo "multipart / form-data"!
A solução proposta seria assim:
$( '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();
});
No entanto, isso resulta em:
Como você pode ver, o tipo de conteúdo está errado ...