javascript - 如何在jQuery中发送带有Ajax请求的FormData对象？ [重复](How to send FormData objects with Ajax-requests in jQuery? [duplicate])

Question

This question already has an answer here:

(这个问题已经在这里有了答案：)

• Sending multipart/formdata with jQuery.ajax 13 answers

  (使用jQuery.ajax发送multipart / formdata 13个答案)

The XMLHttpRequest Level 2 standard (still a working draft) defines the FormData interface.

(XMLHttpRequest 2级标准（仍然是工作草案）定义了FormData接口。)

This interface enables appending File objects to XHR-requests (Ajax-requests).

(此接口允许将File对象附加到XHR请求（Ajax请求）。)

Btw, this is a new feature - in the past, the "hidden-iframe-trick" was used (read about that in my other question ).

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

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.

(其中input是一个<input type="file">字段，并且handler是Ajax请求的成功处理程序。)

This works beautifully in all browsers (again, except IE).

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

Now, I would like to make this functionality work with jQuery.

(现在，我想使此功能与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.

(我假设jQuery需要一个表示表单字段名称/值的简单键值对象，而我要传递的FormData实例显然不兼容。)

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.

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

---

Update:

(更新：)

I've created a "feature ticket" over at jQuery's Bug Tracker.

(我已经在jQuery的Bug跟踪器上创建了“功能票”。)

It's here: http://bugs.jquery.com/ticket/9995

(在这里： http : //bugs.jquery.com/ticket/9995)

I was suggested to use an "Ajax prefilter"...

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

---

Update:

(更新：)

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

(首先，让我做一个演示，演示我想要实现的行为。)

HTML:

(HTML：)

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

JavaScript:

(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:

(上面的代码导致此HTTP请求：)

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

(如您所见，内容类型是错误的...)

  ask by ?ime Vidas translate from so

Answer 1

I believe you could do it like this :

(我相信您可以这样做：)

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

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

Setting processData to false lets you prevent jQuery from automatically transforming the data into a query string.

(将processData设置为false可以防止jQuery自动将数据转换为查询字符串。)

See the docs for more info.

(有关更多信息，请参阅文档 。)

Setting the contentType to false is imperative, since otherwise jQuery will set it incorrectly .

(必须将contentType设置为false，因为否则jQuery 会错误地设置它 。)