使用jQuery.ajax发送多部分/表单数据

我在使用jQuery的ajax函数将文件发送到服务器端PHP脚本时遇到问题。
可以使用$('#fileinput').attr('files')获取文件列表,但如何将此数据发送到服务器?使用文件输入时,服务器端php脚本上的结果数组($\u POST)为0(NULL

我知道这是可能的(尽管直到现在我还没有找到任何jQuery解决方案,只有Prototye代码)(http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html))

这似乎是相对较新的,所以请不要提及通过XHR/Ajax上传文件是不可能的,因为它肯定能工作

我需要在Safari 5,FF和Chrome的功能将很好,但不是必不可少的

我现在的代码是:

$.ajax({
url:'php/upload.php',
数据:$('文件').attr('文件'),
cache:false,
contentType:“多部分/表单数据”,
processData:false,
键入:“POST”,
成功:功能(数据){
警报(数据);
}
});

从Safari 5/Firefox 4开始,最容易使用FormData类:

var data=new FormData();
每个(jQuery('#file')[0]。文件,函数(i,文件){
data.append('file-'+i,file);
});

现在您有了一个FormData对象,可以与XMLHttpRequest一起发送

jQuery.ajax({
url:'php/upload.php',
数据:数据,
cache:false,
contentType:false,
processData:false,
方法:“POST”,
对于jQuery<1.9,键入:'POST',//
成功:功能(数据){
警报(数据);
}
});

您必须将contentType选项设置为false,强制jQuery不要为您添加Content-Type标题,否则,它将丢失边界字符串。
另外,必须将processData标志设置为false,否则jQuery将尝试将FormData转换为字符串,这将失败

现在,您可以使用以下方法在PHP中检索文件:

$\u文件['file-0']

(只有一个文件,file-0,除非您在文件输入中指定了multiple属性,在这种情况下,数字将随着每个文件的增加而增加。)

对旧浏览器使用FormData仿真

变量选项={
url:'php/upload.php',
数据:数据,
cache:false,
contentType:false,
processData:false,
方法:“POST”,
对于jQuery<1.9,键入:'POST',//
成功:功能(数据){
警报(数据);
}
};
if(data.false){
//确保xhr没有进行任何文本编码
opts.xhr=function(){var xhr=jQuery.ajaxSettings.xhr();xhr.send=xhr.sendasbary;返回xhr;}
opts.contentType=“多部分/表单数据;边界=“+data.boundary;
opts.data=data.toString();
}
ajax(opts);

从现有表单创建表单数据

也可以使用现有表单对象的内容创建FormData对象,而不是手动迭代文件:

var data=newformdata(jQuery('form')[0]);

使用PHP本机数组而不是计数器

只需将文件元素命名为相同的名称,并在括号中结束名称:

jQuery.each(jQuery('#file')[0]。文件,函数(i,文件){
data.append('file[],file);
});

$\u FILES['file']将是一个数组,其中包含每个上载文件的文件上载字段。实际上,我建议在我的初始解决方案中使用它,因为它更易于迭代

发表评论