的XMLHttpRequest的2级标准(还是一个工作草案)定义FormData
的接口。此接口允许将File
对象附加到 XHR 请求(Ajax 请求)。
顺便说一句,这是一个新功能 - 过去,使用了“隐藏的 iframe 技巧”(在我的另一个问题中阅读)。
这是它的工作原理(示例):
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 Tracker 上创建了一个“功能票”。它在这里:http : //bugs.jquery.com/ticket/9995
有人建议我使用“Ajax 预过滤器”...
更新:
首先,让我给出一个演示来演示我想要实现的行为。
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 请求:
这就是我需要的- 我想要“多部分/表单数据”内容类型!
建议的解决方案如下:
$( '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();
});
但是,这会导致:
如您所见,内容类型错误...