如何在jQuery中使用Ajax请求发送FormData对象？(How to send FormData objects with Ajax-requests in jQuery? [duplicate])

 
 
 这个问题已经在这里有一个答案： 
 
 
 
  
 用jQuery.ajax发送multipart / formdata 10个答案 
 
 
 
 
 XMLHttpRequest Level 2标准（仍然是工作草案）定义了FormData接口。 此接口可将File对象附加到XHR请求（Ajax请求）。 
 
 Btw，这是一个新功能 - 在过去，“隐藏的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期望一个表示form-field-names / values的简单键值对象，并且我传入的FormData实例显然是不兼容的。 
 
 现在，由于可以将FormData实例传递到xhr.send() ，我希望它也可以使其与jQuery一起工作。 
 
 
 更新： 
 
 我在jQuery的Bug Tracker创建了一个“功能票”。 在这里： http : //bugs.jquery.com/ticket/9995 
 
 我被建议使用“Ajax preilter”... 
 
 
 更新： 
 
 首先让我演示一下演示我想要实现的行为。 
 
 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();
});
 
 上述代码导致此HTTP请求： 
 
 
 这就是我需要的 - 我想要这个“multipart / form-data”的内容类型！ 
 
 
 拟议的解决方案如下： 
 
$( '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();
});
 
 但是，这导致： 
 
 
 您可以看到，内容类型错误... 

 
 
This question already has an answer here:
 
 
 
  
 Sending multipart/formdata with jQuery.ajax  12 answers  
 
 
 
 
The XMLHttpRequest Level 2 standard (still a working draft) defines the FormData interface. This interface enables appending File objects to XHR-requests (Ajax-requests).
 
Btw, this is a new feature - in the past, the "hidden-iframe-trick" was used (read about that in my other question).
 
This is how it works (example):
 
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 );
 
where input is a <input type="file"> field, and handler is the success-handler for the Ajax-request.
 
This works beautifully in all browsers (again, except IE).
 
Now, I would like to make this functionality work with jQuery. I tried this:
 
var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );
 
Unfortunately, that won't work (an "Illegal invocation" error is thrown - screenshot is here). I assume jQuery expects a simple key-value object representing form-field-names / values, and the FormData instance that I'm passing in is apparently incompatible.
 
Now, since it is possible to pass a FormData instance into xhr.send(), I hope that it is also possible to make it work with jQuery.
 
 
Update:
 
I've created a "feature ticket" over at jQuery's Bug Tracker. It's here: http://bugs.jquery.com/ticket/9995
 
I was suggested to use an "Ajax prefilter"...
 
 
Update:
 
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...

原文：https://stackoverflow.com/questions/6974684