如何在jQuery中发送带有Ajax请求的FormData对象？\[重复\]

的XMLHttpRequest的2级标准（还是一个工作草案）定义FormData的接口。该接口允许将File对象附加到XHR请求（Ajax请求）。

顺便说一句，这是一个新功能-过去曾使用过“ hidden-iframe-trick”（请在我的另一个问题中阅读）。

它是这样工作的（示例）：

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 );

哪里input是<input type="file">字段，并且handler是Ajax请求的成功处理者。

在所有浏览器中（同样，除IE之外），它都能很好地工作。

现在，我想使此功能与jQuery一起使用。我尝试了这个：

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

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

不幸的是，这是行不通的（抛出“非法调用”错误- 屏幕截图在此处）。我假设jQuery需要一个表示表单字段名称/值的简单键值对象，并且FormData我要传递的实例显然不兼容。

现在，由于可以将FormData实例传递到中xhr.send()，我希望也可以使其与jQuery一起使用。

更新：

我已经在jQuery的Bug跟踪器上创建了“功能票”。在这里：http : //bugs.jquery.com/ticket/9995

建议我使用“ Ajax预过滤器” ...

更新：

First, let me give a demo demonstrating what behavior I would like to achieve.

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();
});

The above code results in this HTTP-request:

多部分数据

This is what I need - I want that "multipart/form-data" content-type!

The proposed solution would be like so:

$( '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();
});

However, this results in:

错误的内容类型

As you can see, the content type is wrong...