从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']将是一个包含每个上传文件的文件上传字段的数组。实际上，我建议在初始解决方案中使用这种方法，因为迭代更简单。

看看我的代码，它为我做了这项工作

$( '#formId' )
  .submit( function( e ) {
    $.ajax( {
      url: 'FormSubmitUrl',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

如果表单是在HTML中定义的，那么将表单传递给构造函数要比迭代和添加图像容易得多。

$('#my-form').submit( function(e) {
    e.preventDefault();

    var data = new FormData(this); // <-- 'this' is your form element

    $.ajax({
            url: '/my_URL/',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',     
            success: function(data){
            ...

FormData类确实可以工作，但在iOS Safari(至少在iPhone上)我不能使用Raphael Schweikert的解决方案。

Mozilla Dev有一个关于操纵FormData对象的不错的页面。

因此，在页面的某个地方添加一个空表单，指定enctype:

<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"></form>

然后，创建FormData对象如下:

var data = new FormData($("#fileinfo"));

就像拉斐尔的密码一样

我只是根据我读到的一些信息构建了这个函数。

像使用.serialize()一样使用它，而不是只放.serializefiles();。 在这里做测试

//USAGE: $("#form").serializefiles();
(function($) {
$.fn.serializefiles = function() {
    var obj = $(this);
    /* ADD FILE TO PARAM AJAX */
    var formData = new FormData();
    $.each($(obj).find("input[type='file']"), function(i, tag) {
        $.each($(tag)[0].files, function(i, file) {
            formData.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
        formData.append(val.name, val.value);
    });
    return formData;
};
})(jQuery);

如果文件输入名称指示一个数组并标记多个，并且使用FormData解析整个表单，则没有必要迭代地追加()输入文件。FormData将自动处理多个文件。

$('#submit_1').on('click', function() { let data = new FormData($("#my_form")[0]); $.ajax({ url: '/path/to/php_file', type: 'POST', data: data, processData: false, contentType: false, success: function(r) { console.log('success', r); }, error: function(r) { console.log('error', r); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="my_form"> <input type="file" name="multi_img_file[]" id="multi_img_file" accept=".gif,.jpg,.jpeg,.png,.svg" multiple="multiple" /> <button type="button" name="submit_1" id="submit_1">Not type='submit'</button> </form>

注意，这里使用的是常规按钮type="button"，而不是type="submit"。这表明不依赖于使用submit来获得此功能。

结果$_FILES条目在Chrome开发工具中是这样的:

multi_img_file:
  error: (2) [0, 0]
  name: (2) ["pic1.jpg", "pic2.jpg"]
  size: (2) [1978036, 2446180]
  tmp_name: (2) ["/tmp/phphnrdPz", "/tmp/phpBrGSZN"]
  type: (2) ["image/jpeg", "image/jpeg"]

注意:在某些情况下，某些图像在作为单个文件上传时可以正常上传，但在以一组多个文件上传时就会失败。其症状是PHP报告空$_POST和$_FILES，而AJAX没有抛出任何错误。问题发生在Chrome 75.0.3770.100和PHP 7.0。在我的测试集中，几十张图片中似乎只有一张出现这种情况。