如何实现带数量限制的多文件顺序添加与预览且不覆盖已选文件

问题：首次选择多个文件可正常选中，但再次选择文件时会覆盖之前的已选文件，需要实现再次选择时保留原有文件，合并两次选择的结果。

问题根源 #

当前代码中，前端的imgArray虽会累积所有选中文件，但<input type="file">的files属性是只读的，每次选择新文件后该属性仅存储本次选择内容，导致表单提交时仅能传递最后一次选择的文件。同时原代码对已选文件数量的判断存在冗余逻辑。

修改后的完整代码 #

JavaScript 部分

jQuery(document).ready(function() {
  ImgUpload();
});

function ImgUpload() {
  let imgWrap = "";
  let imgArray = [];

  $('.upload__inputFile').each(function() {
    const $input = $(this);
    $(this).on('change', function(e) {
      imgWrap = $input.closest('.upload__box').find('.upload__img-wrap');
      const maxLength = parseInt($input.attr('data-max_length'), 10);
      const files = e.target.files;
      const filesArr = Array.prototype.slice.call(files);

      filesArr.forEach(function(f) {
        // 仅允许图片文件
        if (!f.type.match('image.*')) {
          return;
        }

        // 检查是否超出最大数量限制
        if (imgArray.length >= maxLength) {
          alert(`最多只能选择 ${maxLength} 张图片`);
          return;
        }

        // 新增文件存入数组
        imgArray.push(f);

        // 读取文件并生成预览
        const reader = new FileReader();
        reader.onload = function(e) {
          const html = `<div class='upload__img-box'>
            <div style='background-image: url(${e.target.result})' 
                 data-file='${f.name}' 
                 class='img-bg'>
              <div class='upload__img-close'></div>
            </div>
          </div>`;
          imgWrap.append(html);
        };
        reader.readAsDataURL(f);
      });

      // 重置input值，解决无法选择同名文件的问题
      $input.val('');
    });
  });

  // 删除图片逻辑
  $('body').on('click', ".upload__img-close", function(e) {
    const file = $(this).parent().data("file");
    // 从数组中移除对应文件
    imgArray = imgArray.filter(item => item.name !== file);
    // 删除预览元素
    $(this).closest('.upload__img-box').remove();
  });

  // 自定义表单提交逻辑（确保提交所有文件）
  $('form').on('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    // 清空原input的文件项，添加所有累积的文件
    formData.delete('image[]');
    imgArray.forEach(file => {
      formData.append('image[]', file);
    });
    // 用AJAX提交表单数据
    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(res) {
        console.log('提交成功', res);
      }
    });
  });
}

HTML 部分

<form action="你的提交地址" method="post" enctype="multipart/form-data">
  <div class="upload__box">
    <input type="file" id="files" name="image[]" multiple data-max_length="9" class="upload__inputFile">
    <div class="upload__img-wrap"></div>
  </div>
  <button type="submit">提交</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

关键修改点 #

• 重置input值：每次选择文件后执行$input.val('')，解决无法重复选择同名文件的问题。
• 简化数量判断：直接用imgArray.length >= maxLength替代冗余的循环计数，逻辑更清晰。
• 表单提交处理：通过FormData手动合并所有累积的文件，确保后端能接收全部选中内容。
• 优化删除逻辑：用filter方法简化数组元素移除操作，代码更简洁。

说明 #

• 前端预览会自动追加新选择的图片，不会覆盖原有内容。
• 提交表单时，通过FormData整合所有已选文件，避免仅提交最后一次选择的内容。
• 保留图片删除功能，删除操作会同步更新前端预览和文件数组。

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