使用jQuery.ajax发送multipart / formdata

Question

我在使用jQuery的ajax函数将文件发送到服务器端PHP脚本时遇到问题。可以获取File-
List，$('#fileinput').attr('files')但是如何将此数据发送到服务器呢？使用文件输入时$_POST，服务器端php脚本上的结果数组（）为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',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

Answer 1

从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']然后将是一个数组，其中包含每个上载文件的文件上载字段。实际上，我建议在我最初的解决方案中使用此方法，因为它更容易迭代。