jQuery多文件逐个上传UI更新异常问题求助

你的代码核心问题是jQuery的$.each不支持异步迭代，导致所有上传请求被同时触发，而非逐个串行执行，进而引发UI更新混乱、状态图标异常。另外还有几处细节问题需要调整，以下是具体修复方案：

问题拆解 #

1. $.each与async/await不兼容：$.each会立即遍历所有文件并触发所有异步上传操作，完全无视await，导致上传顺序失控，UI更新逻辑错乱。
2. StatusIco无对应文件的DOM绑定：所有文件共用同一个状态图标，导致状态显示混乱。
3. FormData字段名不合理：用索引作为字段名可能不符合后端解析逻辑，且逐个上传时无需区分索引。
4. 冗余的e.preventDefault()：change事件无默认跳转行为，该代码多余。

修复后的完整代码 #

function UploadFile(file) {
  return new Promise((resolve) => {
    $.ajax({
      url: "/api/admin/upload",
      type: "POST",
      data: file,
      processData: false,
      contentType: false,
      dataType: "json", // 自动解析JSON，无需手动JSON.parse
      success: function (d) {
        if (d.error_info) {
          resolve({ r: "error", i: d.error_info });
        } else if (d.success_info) {
          resolve({ r: "success", i: "Ok" });
        } else if (d.fileexists) {
          resolve({ r: "fileexists", i: "Ok" });
        } else {
          resolve({ r: "error-0", i: JSON.stringify(d) });
        }
      },
      error: function (xhr) {
        console.error("上传失败:", xhr.responseText);
        resolve({ r: "error-0", i: `请求错误: ${xhr.status}` });
      },
    });
  });
}

$(document).on("change", "input[type='file']", async function () {
  const files = this.files;
  if (files.length === 0) return;

  // 1. 初始化每个文件的UI元素，保存引用
  const fileElements = [];
  const $uploadContainer = $(".uploading");
  $uploadContainer.find(".file-list").empty(); // 清空旧列表

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const $fileItem = $(`
      <div class="file-item">
        <span class="filename">${file.name}</span>
        <span class="status-ico"></span>
      </div>
    `);
    $uploadContainer.find(".file-list").append($fileItem);
    fileElements.push({
      element: $fileItem,
      statusIco: $fileItem.find(".status-ico")
    });
  }

  // 2. 串行逐个上传文件，用for...of支持async/await
  let uploadedCount = 0;
  const totalFiles = files.length;

  for (const [index, file] of Array.from(files).entries()) {
    const formData = new FormData();
    formData.append("file", file); // 固定字段名，适配后端解析
    const fileElement = fileElements[index];
    
    const result = await UploadFile(formData);
    uploadedCount++;

    // 更新当前文件的状态图标
    switch (result.r) {
      case "success":
        fileElement.statusIco.html('<i class="fa-solid fa-circle-check" data-info="Done"></i>');
        break;
      case "error":
        fileElement.statusIco.html(`<i class="fa-solid fa-circle-xmark" data-info="${result.i}"></i>`);
        break;
      case "fileexists":
        fileElement.statusIco.html('<i class="fa-solid fa-circle-exclamation" data-info="File exists"></i>');
        break;
      default:
        console.error("未知响应:", result.i);
        fileElement.statusIco.html('<i class="fa-solid fa-circle-xmark" data-info="Unknown error"></i>');
        break;
    }

    // 更新全局进度
    const percentage = Math.round((100 * uploadedCount) / totalFiles) + "%";
    $uploadContainer.find(".percentage").html(percentage);
    $uploadContainer.find(".head .text").html(`已上传 ${uploadedCount}/${totalFiles}`);

    // 最后一个文件上传完成
    if (uploadedCount === totalFiles) {
      $uploadContainer.find(".head .text").html("上传完成");
    }
  }
});

关键修改说明 #

• 改用for...of实现串行上传：for...of会等待每个await完成后再执行下一次循环，严格保证逐个上传的顺序，避免服务器压力过大。
• 为每个文件绑定独立的UI元素：初始化时创建每个文件的DOM节点并保存状态图标引用，确保状态更新精准对应到单个文件。
• 优化UploadFile函数：添加dataType: "json"自动解析响应，避免手动JSON.parse的潜在错误；完善错误信息输出。
• 简化FormData字段：逐个上传时用固定字段名"file"，后端只需接收单个文件即可，无需处理索引。

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