如何在jQuery的Ajax的请求发送FORMDATA对象？ [英] How to send FormData objects with Ajax-requests in jQuery?
问题描述
借助 XMLHtt prequest 2级标准（仍然是一个工作草案）定义了 FORMDATA 接口。该接口使追加文件反对的XHR请求（Ajax的请求）。
The XMLHttpRequest Level 2 standard (still a working draft) defines the FormData interface. This interface enables appending File objects to XHR-requests (Ajax-requests).
顺便说一句，这是一个新的功能 - 在过去，隐藏的iframe绝招是使用（阅读，在<一个href="http://stackoverflow.com/questions/6718664/is-it-possible-to-peform-an-asynchronous-cross-domain-file-upload/6963843">my另一个问题）。
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 );
其中，输入是＆LT;输入类型=文件＆GT; 字段，和处理是成功，处理程序的Ajax请求。
where input is a <input type="file"> field, and handler is the success-handler for the Ajax-request.
本精美的作品在所有浏览器（同样，除了IE浏览器）。
This works beautifully in all browsers (again, except IE).
现在，我想提出与jQuery此功能工作。我想这样的：
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 );
不幸的是，这是行不通的（非法调用引发错误 - 截图是这里）。我认为jQuery的预期再度presenting表单域，名称/值的简单键值的对象，而 FORMDATA 实例我传入显然是不相容的。
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.
现在，因为它可以通过一个 FORMDATA 实例为 xhr.send（），我希望但也可以使其与jQuery工作
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.
更新：
我创建了一个功能准考证上的jQuery的Bug跟踪。它在这里： http://bugs.jquery.com/ticket/9995
I've created a "feature ticket" over at jQuery's Bug Tracker. It's here: http://bugs.jquery.com/ticket/9995
我建议使用阿贾克斯prefilter......
I was suggested to use an "Ajax prefilter"...
更新：
首先，让我给一个演示展示什么样的行为，我想实现的。
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的：
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请求以上code结果：
The above code results in this HTTP-request:
这是我需要的！ - 我要那个的multipart / form-data的内容类型
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...
推荐答案
我相信你能做到这一点是这样的：
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);
}
});
设置过程数据为false，您可以自动将数据转换一个查询字符串prevent jQuery的。请参见的文档获得更多信息。
设置的contentType 来假是必要的，因为否则的jQuery 将其设置正确的。
Setting the contentType to false is imperative, since otherwise jQuery will set it incorrectly.
这篇关于如何在jQuery的Ajax的请求发送FORMDATA对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
