XMLHttpRequest Level 2标准(仍然是工作草案)定义了FormData接口。该接口允许将File对象追加到XHR-requests (Ajax-requests)。
顺便说一句，这是一个新功能——在过去，“隐藏的ifame -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预过滤器”……
更新:
首先，让我来演示一下我想要实现的行为。
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();
});
然而，这会导致:
如您所见，内容类型是错误的……
