从Safari 5 / Firefox 4开始,最容易使用FormData
该类:
var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
因此,现在您有了一个FormData
对象,准备与XMLHttpRequest一起发送。
jQuery.ajax({
url: 'PHP/upload.PHP',
data: data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(data){
alert(data);
}
});
必须将contentType
选项设置为false
,强制jQuery不Content- Type
为您添加标题,否则,边界字符串将丢失。另外,必须将processData
标志设置为false,否则jQuery将尝试将您FormData
转换为字符串,这将失败。
$_FILES['file-0']
(file-0
除非您multiple
在文件输入中指定了属性,否则只有一个文件,在这种情况下,数字将随每个文件递增。)
var opts = {
url: 'PHP/upload.PHP',
data: data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(data){
alert(data);
}
};
if(data.fake) {
// Make sure no text encoding stuff is done by xhr
opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; }
opts.contentType = "multipart/form-data; boundary="+data.boundary;
opts.data = data.toString();
}
jQuery.ajax(opts);
除了手动迭代文件,还可以使用现有表单对象的内容来创建FormData对象:
var data = new FormData(jQuery('form')[0]);
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file[]', file);
});
$_FILES['file']
然后将是一个数组,其中包含每个上载文件的文件上载字段。实际上,我建议在我最初的解决方案中使用此方法,因为它更容易迭代。