如何通过ajax以与纯PHP相同的格式获取$ _FILES数据

Question

I've working upload script. Only thing I need to edit is format of $_FILES array.

My HTML

<input id="upload_dialog" name="file[]" type="file" multiple>

My Javascript

<script>
    $('#upload_dialog').on('change', function(event) {
      var form = new FormData();
      $.each(event.target.files, function(key, value) {
        form.append(key, value);
      });

      $.ajax({
        url: 'url,
        type: 'POST',
        data: form,
        processData: false,
        contentType: false,
        cache: false,
        async: true,
        done: function(data) {
          data = JSON.parse(data);

      });
    });
</script>

This array I will get by uploading files via ajax.

array(2) {
  [0]=>
  array(5) {
    ["name"]=>
    string(11) "ps-logo.jpg"
    ["type"]=>
    string(10) "image/jpeg"
    ["tmp_name"]=>
    string(23) "/home/www/tmp/phpMBu4TE"
    ["error"]=>
    int(0)
    ["size"]=>
    int(24722)
  }
  [1]=>
  array(5) {
    ["name"]=>
    string(12) "tnk-logo.png"
    ["type"]=>
    string(9) "image/png"
    ["tmp_name"]=>
    string(23) "/home/www/tmp/php9yPGpf"
    ["error"]=>
    int(0)
    ["size"]=>
    int(23748)
  }
}

But I would need this type of array, which I usually get if I submit upload form only via pure PHP.

array(1) {
  ["file"]=>
  array(5) {
    ["name"]=>
    array(2) {
      [0]=>
      string(12) "tnk-logo.png"
      [1]=>
      string(11) "ps-logo.jpg"
    }
    ["type"]=>
    array(2) {
      [0]=>
      string(9) "image/png"
      [1]=>
      string(10) "image/jpeg"
    }
    ["tmp_name"]=>
    array(2) {
      [0]=>
      string(23) "/home/www/tmp/phpWGezym"
      [1]=>
      string(23) "/home/www/tmp/phpIqOpKY"
    }
    ["error"]=>
    array(2) {
      [0]=>
      int(0)
      [1]=>
      int(0)
    }
    ["size"]=>
    array(2) {
      [0]=>
      int(23748)
      [1]=>
      int(24722)
    }
  }
}

Is there any simple way how to send data via ajax to get this type of array?

Answer 1

JavaScript Solution

Instead of adding the files as elements of a new form, create the FormData instance using the form that the input is already inside of.

$('#upload_dialog').on('change', function(event) {
    var input = event.target,
        form = input.form,
        data = new FormData(form);

    $.ajax({
        url: '/form.php',
        type: 'POST',
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        async: true,
        done: function(data) {
            data = JSON.parse(data);
        }
    });
});

My original not-as-good PHP solution

To have PHP handle both ways that the files might be submitted, you could do something like this to convert it to the format you want if it isn't already in that format:

function maybe_ajax_files($field) {
    // If $_FILES is empty or it's already got the field we need,
    // just use it as-is.
    if (empty($_FILES) || isset($_FILES[$field])) {
        return $_FILES;
    }

    // Otherwise, regroup them...
    $regrouped = array();
    foreach ($_FILES as $file) {
        foreach ($file as $key => $val) {
            if (!isset($regrouped[$key])) {
                $regrouped[$key] = array();
            }
            $regrouped[$key][] = $val;
        }
    }

    // Then assign that array to the desired field in a new array.
    $files = array();
    $files[$field] = $regrouped;
    return $files;
}

// 'file' is the name of the field in your example:
// <input id="upload_dialog" name="file[]" type="file" multiple>
$files = maybe_ajax_files('file');