Question

我需要在FormData中添加一个图像数组，但只传递第一个图像。

我知道问题出在JS代码中，因为当我将表单直接发送到php页面时，它可以正常工作。

的JavaScript

var url = $(this).attr('action');
var data = new FormData();

$.each($("input[type='file']")[0].files, function(i, file) {
    data.append('image[]', file);
});

$.ajax({
    url: url,
    type: 'POST',
    data: data,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(data) {
        console.log(data);
    }
});

HTML

<label for="1">Image 1</label>
<input type="file" name="image[]" id="1"/>

<label for="1">Image 2</label>
<input type="file" name="image[]" id="2" />

<label for="1">Image 3</label>
<input type="file" name="image[]" id="3" />

Answer 1

尝试

jQuery.each(jQuery('input[type=file]'), function(i, value) 
{
    data.append('image['+i+']', value.files[0]);
});

Answer 2

对于Vanilla JS，我喜欢使用Array.from并像这样遍历每个元素

let data = new FormData();
let input_file = document.querySelector('input[type="file"]')

Array.from(input_file.files).forEach((f) => {
    data.append('image[]', f)
})

附加FormData（）上的多个文件

2 个答案: