从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
转换为字符串,这将失败。
您现在可以使用以下方式在PHP中检索文件:
$_FILES['file-0']
(file-0
除非您multiple
在文件输入中指定了属性,否则只有一个文件,在这种情况下,数字将随每个文件递增。)
对较旧的浏览器使用FormData仿真
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
除了手动迭代文件,还可以使用现有表单对象的内容来创建FormData对象:
var data = new FormData(jQuery('form')[0]);
使用PHP本机数组而不是计数器
只需将文件元素命名为相同,并在方括号中加上名称即可:
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file[]', file);
});
$_FILES['file']
然后将是一个数组,其中包含每个上载文件的文件上载字段。实际上,我建议在我最初的解决方案中使用它,因为它更容易迭代。