如何通过关联输入块实现多文件上传并存储为对象数组？

实现思路 #

把每个文件上传框和对应的关联输入框（比如备注、分类）放在同一个分组里，通过JS监听分组的增减，最后遍历所有分组，将每个文件的信息和关联输入值整合成对象，存入数组。

1. HTML结构 #

先搭建基础的分组容器、初始上传组，以及添加/提交按钮：

<!-- 存放所有上传分组的容器 -->
<div id="fileUploadContainer">
  <!-- 初始的一组：文件上传框 + 关联输入框 + 删除按钮 -->
  <div class="upload-group">
    <input type="file" class="file-input" />
    <input type="text" class="related-input" placeholder="输入文件备注/分类" />
    <button class="remove-group">删除</button>
  </div>
</div>

<button id="addGroup">添加更多文件</button>
<button id="submitUpload">提交上传</button>

2. 基础样式（可选） #

给分组加个简单布局，让界面更清晰：

.upload-group {
  margin: 12px 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.remove-group {
  padding: 4px 8px;
  background-color: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

3. JavaScript核心逻辑 #

3.1 动态增减上传分组

实现点击按钮添加新的上传组，以及删除分组的功能：

const container = document.getElementById('fileUploadContainer');
const addGroupBtn = document.getElementById('addGroup');

// 绑定删除按钮事件
function bindRemoveEvent(removeBtn) {
  removeBtn.addEventListener('click', () => {
    removeBtn.parentElement.remove();
  });
}

// 初始分组的删除按钮绑定事件
bindRemoveEvent(document.querySelector('.remove-group'));

// 添加新的上传分组
addGroupBtn.addEventListener('click', () => {
  const newGroup = document.createElement('div');
  newGroup.className = 'upload-group';
  newGroup.innerHTML = `
    <input type="file" class="file-input" />
    <input type="text" class="related-input" placeholder="输入文件备注/分类" />
    <button class="remove-group">删除</button>
  `;
  container.appendChild(newGroup);
  // 给新分组的删除按钮绑定事件
  bindRemoveEvent(newGroup.querySelector('.remove-group'));
});

3.2 收集数据并转为对象数组

点击提交按钮时，遍历所有分组，把文件信息和关联输入值整合为对象数组：

const submitBtn = document.getElementById('submitUpload');

submitBtn.addEventListener('click', () => {
  const allGroups = document.querySelectorAll('.upload-group');
  const uploadResultArray = [];

  allGroups.forEach(group => {
    const fileInput = group.querySelector('.file-input');
    const relatedInput = group.querySelector('.related-input');
    const selectedFile = fileInput.files[0];

    // 只收集已选择文件的分组数据
    if (selectedFile) {
      uploadResultArray.push({
        file: selectedFile,          // 原生File对象
        fileName: selectedFile.name, // 文件名
        relatedContent: relatedInput.value.trim(), // 关联输入内容
        fileSize: selectedFile.size, // 文件大小（字节）
        fileType: selectedFile.type  // 文件类型
      });
    }
  });

  // 这里可以对结果数组进行后续操作：打印查看、上传到服务器等
  console.log('整理后的上传数据数组:', uploadResultArray);

  // 示例：转为FormData格式上传到后端
  const formData = new FormData();
  uploadResultArray.forEach((item, index) => {
    formData.append(`uploadItems[${index}][file]`, item.file);
    formData.append(`uploadItems[${index}][relatedContent]`, item.relatedContent);
  });

  // 发送上传请求
  // fetch('/your-upload-api', {
  //   method: 'POST',
  //   body: formData
  // }).then(res => res.json()).then(data => console.log('上传成功:', data));
});

关键说明 #

• 每个分组独立管理，避免文件和关联输入错位
• 收集数据时跳过未选择文件的分组，保证数据有效性
• 如果需要上传到后端，推荐用FormData格式，兼容大多数后端框架的文件解析逻辑

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