Esta pergunta já tem uma resposta aqui:

OXMLHttpRequest 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 ...