动态多文件上传表单：如何按用户分组追加文件至FormData

嘿，我来帮你搞定这个按用户分组把文件添加到FormData的问题！根据你的DOM结构和需求，我们可以通过按用户分组遍历文件输入框的方式，精准地把每个用户的文件对应到正确的FormData字段里。

核心思路 #

你的文件输入框已经按用户做了明确区分：

• 用户1的输入框name是arquivoDep_1_[]，放在#InputsWrapper_1容器下
• 用户2的输入框name是arquivoDep_2_[]，放在#InputsWrapper_2容器下

我们只需要针对每个用户的输入框组单独处理，把对应组里的文件用匹配的字段名追加到FormData中即可。

方法一：通过父容器分组（推荐，更贴合你的DOM结构） #

利用每个用户的输入框都在专属的InputsWrapper_x容器里的特点，直接遍历容器来分组处理：

const form_data = new FormData();

// 遍历每个用户的输入框容器
$("[id^=InputsWrapper_]").each(function() {
    // 从容器ID中提取用户ID（比如从InputsWrapper_1得到1）
    const userId = this.id.replace('InputsWrapper_', '');
    // 找到当前容器下的所有文件输入框
    $(this).find("input[type=file]").each(function() {
        // 遍历当前输入框里的所有文件
        $.each(this.files, function(_, file) {
            // 用对应用户的字段名追加文件
            form_data.append(`arquivoDep_${userId}_[]`, file, file.name);
        });
    });
});

方法二：通过输入框name前缀分组 #

如果后续你的输入框结构有变动，不在固定容器里，可以通过name属性的前缀来分组：

const form_data = new FormData();

// 先提取所有唯一的用户ID（从输入框name中解析）
const userIds = [...new Set($("input[type=file]").map(function() {
    // 从name="arquivoDep_x_[]"中提取用户ID x
    return this.name.match(/arquivoDep_(\d+)_\[\]/)[1];
}))];

// 遍历每个用户ID，处理对应输入框的文件
userIds.forEach(userId => {
    $(`input[name="arquivoDep_${userId}_[]"]`).each(function() {
        $.each(this.files, function(_, file) {
            form_data.append(`arquivoDep_${userId}_[]`, file, file.name);
        });
    });
});

效果说明 #

这两种方法都会让FormData中的文件按用户分组：

• 用户1的所有文件会被追加到arquivoDep_1_[]字段
• 用户2的所有文件会被追加到arquivoDep_2_[]字段

后端接收时就能直接按用户分组获取文件，完全符合你的需求～

内容的提问来源于stack exchange，提问作者user12092062