多选file输入框移除文件后如何更新值及同步FormData

我明白你遇到的痛点——原生的input[type=file][multiple]的文件集合是只读的，没法直接删除单个文件，而且浏览器安全限制也不允许你手动修改它的value属性。不过我们可以换个思路：用一个自定义数组来跟踪用户最终要提交的文件，而不是依赖input原生的files集合。下面是具体的实现方案：

核心思路 #

1. 维护一个局部作用域内的数组，用来存储用户确认要上传的文件
2. 当用户选择新文件时，将这些文件添加到数组中（可选：处理重复文件）
3. 渲染文件列表和移除按钮，点击移除时从数组中删除对应文件
4. 提交表单时，遍历这个自定义数组，将文件逐个添加到FormData中，而不是直接使用input的files

完整代码实现 #

HTML 结构（调整后） #

<div class="row">
  <div class="col-100">
    <label class="file-label button button-big color-black f16 bold link" for="file">
      <i class="fa fa-paperclip"></i>
      <span class="file-text">Add Attachments</span>
    </label>
    <input type="file" name="addnote-attachment[]" id="file" class="inputfile" multiple="true" />
    <!-- 新增文件列表容器 -->
    <div id="file-list" class="mt-2"></div>
  </div>
</div>

JavaScript 逻辑（基于jQuery） #

// 初始化存储待上传文件的数组
let selectedFiles = [];

// 监听文件选择事件
$('.view').on('change', '#form-add-note #file', function(event) {
  const newFiles = Array.from(event.target.files);
  
  // 可选：过滤掉已选中的重复文件（根据文件名和大小判断）
  const uniqueNewFiles = newFiles.filter(newFile => {
    return !selectedFiles.some(existingFile => 
      existingFile.name === newFile.name && existingFile.size === newFile.size
    );
  });
  
  // 将新文件添加到数组
  selectedFiles.push(...uniqueNewFiles);
  
  // 渲染文件列表
  renderFileList();
});

// 渲染文件列表和移除按钮
function renderFileList() {
  const $fileList = $('#file-list');
  $fileList.empty();
  
  selectedFiles.forEach((file, index) => {
    const $fileItem = $(`
      <div class="file-item d-flex align-items-center justify-content-between p-2 border mb-1">
        <span>${file.name}</span>
        <button type="button" class="btn btn-sm btn-danger file-remove-btn" data-index="${index}">
          Remove
        </button>
      </div>
    `);
    $fileList.append($fileItem);
  });
}

// 监听移除按钮点击事件
$('.view').on('click', '.file-remove-btn', function() {
  const index = $(this).data('index');
  // 从数组中删除对应文件
  selectedFiles.splice(index, 1);
  // 重新渲染列表
  renderFileList();
});

// 表单提交时处理FormData
$('.view').on('submit', '#form-add-note', function(e) {
  e.preventDefault();
  
  const formData = new FormData();
  
  // 将自定义数组中的文件添加到FormData，保持name和原input一致
  selectedFiles.forEach(file => {
    formData.append('addnote-attachment[]', file);
  });
  
  // 这里可以添加其他表单字段到FormData
  // 比如：formData.append('note-content', $('#note-content').val());
  
  // 发送AJAX请求
  $.ajax({
    url: $(this).attr('action'),
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      // 处理成功逻辑
      console.log('上传成功', response);
    },
    error: function(xhr) {
      // 处理错误逻辑
      console.error('上传失败', xhr);
    }
  });
});

关键说明 #

1. 为什么不能直接修改input的value？
   浏览器出于安全考虑，禁止脚本直接设置input[type=file]的value属性，防止恶意代码自动上传用户本地文件。所以必须通过自定义数组来维护文件列表。

2. FormData的处理
   提交时不再依赖原input的files，而是遍历我们的selectedFiles数组，用formData.append()方法逐个添加文件，保证只提交用户确认保留的文件，且name属性和原input一致，后端可以正常接收。

3. 重复文件处理
   代码中加入了重复文件过滤逻辑（根据文件名和文件大小判断），如果你的场景允许重复上传，可以去掉这部分逻辑。

这样就能完美实现你想要的效果：展示所有选中文件、支持单个移除，且提交时FormData能正确获取到更新后的文件列表。

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