使用ajax发送多个文件而不使用html表单

Question

我使用具有多个上传属性的单个文件输入字段。我已经测试过这样的单文件传递并且它有效。现在我正在尝试使用数组传递文件，但有一个错误。没有形式。

HTML：

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

JS：

var formData = new FormData();
var files = [];
for(var i = 0; i < length; i++) {
    files[i] = $('input', '#fileInfo')[0].files[i];
}
formData.append('userfile', files);
$.ajax({
    url: "example.php",
    data: formData,
    type: 'POST',
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(res)
    {
        console.log("done");
    }
});

PHP：

<?php
$length = sizeof($_FILES['userfile']['name']);
json_encode(array($length));

错误日志：

PHP Notice:  Undefined index: userfile in /path/to/php on line 2, referer: http://localhost/test

Answer 1

不要用文件构建一个数组（这有点奇怪，因为源已经是一个数组），而是将文件直接附加到您的 FormData 对象：

var formData = new FormData();

// Get all the files so we easily can get the length etc.
// Not necessary, but it will make the code easier to read.
var files = $('input', '#fileInfo')[0].files;

for(var i = 0; i < files.length; i++) {
    formData.append('userfile[]', files[i]);
}

$.ajax({
    // your ajax call
});

我们还更改'userfile'为'userfile[]'which 将使其成为您可以在 PHP 中循环的数组。