JavaScript多文件上传时删除数组元素后已删文件复现问题求助

问题核心原因 #

1. 使用delete操作数组元素只会将对应位置的值置为undefined，不会真正移除该数组项，数组长度保持不变，提交时仍会读取到已删除的旧文件数据
2. 代码中temp.filter(...)逻辑完全无效：未定义temp变量，且filter方法不会修改原数组，返回的新数组未赋值给file_temp，等于没有执行清理操作
3. 全局拼接的fileInfo变量未同步删除操作：每次新增文件都在原有fileInfo基础上拼接新HTML，删除DOM时没有同步更新fileInfo，下次新增文件时会把包含已删除文件的旧HTML重新渲染到页面
4. 删除操作仅处理了file_temp数组，未同步删除note数组对应下标的元素，两个数组会出现索引错位，数据不匹配

修复代码 #

let file_temp = [];
let note = [];
// 移除全局fileInfo变量，改为每次动态渲染列表

$(".upload_file").click(function() {
  $("#upload").click();
});
$("#upload").change(function() {
  let fileData = $(this).prop("files")[0];
  // 校验可以根据需求扩展，这里保持原有逻辑
  if (fileData.type == 'image/jpg' || fileData.type == 'image/jpeg') {
    let file_note = $('#fileNote').val();
    // 新增文件直接push到两个数组
    file_temp.push({ "file": fileData });
    note.push({ "note": file_note });
    // 每次新增后重新渲染整个文件列表
    renderFileList();
    // 清空input value，避免下次上传相同文件不触发change事件
    $(this).val('');
  }
});

// 新增文件列表渲染函数，统一根据当前file_temp生成HTML
const renderFileList = () => {
  let fileInfo = '';
  file_temp.forEach((item, index) => {
    if (!item) return;
    const filename = item.file.name;
    fileInfo += `<div class="tab-content col-12 mt-4" id="myTabContent-2">
      <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
        <div class="col-md-12" id="file_note_${index}" data-ind="${index}">         
          <ul class="perfomer-lists m-0 p-0" id="">
            <li class="d-flex mb-4 align-items-center">
              <div class="mr-2">
                <span class='close' onclick='deleteFile(${index}, "doc")'>&times;</span>
              </div>
              <div class="ml-3">
                <p class="mb-0 font-size-12"> ${filename}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>`;
  });
  document.getElementById("info").innerHTML = fileInfo;
}

// 修复后的删除功能
const deleteFile = (index, process) => {
  switch (process) {
    case "doc":
      // 用splice真正移除数组对应位置的元素，同步处理两个数组
      file_temp.splice(index, 1);
      note.splice(index, 1);
      // 重新渲染列表，自动同步最新数据
      renderFileList();
      break;
  }
}

修复说明 #

• 移除全局拼接的fileInfo变量，新增独立的renderFileList函数，每次文件变更后都根据当前file_temp数组动态生成列表HTML，彻底避免HTML和实际存储的文件数据不同步的问题
• 用splice(index, 1)替代delete操作，真正从数组中移除对应下标的元素，同时同步删除note数组对应项，保证两个数组索引始终匹配
• 每次上传文件后清空input的value，避免重复上传相同文件时不触发change事件
• 删除操作执行后直接调用renderFileList刷新列表，不需要手动操作DOM移除元素，保证数据和视图一致

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