如何通过Ajax|PHP计算时间？求助为文件上传脚本添加计时功能

没问题，我来帮你给这个上传脚本加上时间计数器功能。核心思路是记录上传开始的时间戳，然后在上传过程中（或完成后）计算耗时并展示出来。下面是修改后的完整代码，我会标注关键改动：

function uploadFile(){
  // 新增：用于存储上传开始时间
  let startTime;
  // 获取显示时间的元素（你需要在页面上添加这个元素，比如 <div id="upload-timer">上传计时：00:00:00</div>）
  const timerElement = document.getElementById('upload-timer');

  // 新增：格式化毫秒为时分秒的工具函数
  function formatTime(milliseconds) {
    const totalSeconds = Math.floor(milliseconds / 1000);
    const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
    const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
    const seconds = String(totalSeconds % 60).padStart(2, '0');
    return `${hours}:${minutes}:${seconds}`;
  }

  var file = _("file-7").files[0];
  var formdata = new FormData();
  formdata.append("file", file);
  var ajax = new XMLHttpRequest();

  // 上传进度事件：这里可以实时更新已用时间
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  // 补充abort事件监听，避免上传中断时计时器逻辑缺失
  ajax.addEventListener("abort", abortHandler, false);

  // 新增：上传开始前记录时间戳
  startTime = Date.now();
  // 发送请求（请替换成你的实际上传接口地址）
  ajax.open("POST", "/your-upload-api", true);
  ajax.send(formdata);

  function progressHandler(event) {
    // 保留你原有进度处理逻辑（比如更新进度条）
    // ...

    // 新增：计算并实时更新已用时间
    const elapsedTime = Date.now() - startTime;
    timerElement.textContent = `上传已耗时：${formatTime(elapsedTime)}`;
  }

  function completeHandler(event) {
    // 保留你原有上传完成的处理逻辑
    // ...

    // 新增：计算总耗时并展示
    const totalTime = Date.now() - startTime;
    timerElement.textContent = `上传完成！总耗时：${formatTime(totalTime)}`;
  }

  function errorHandler(event) {
    // 保留你原有错误处理逻辑
    // ...

    // 新增：上传出错时显示已耗时
    const elapsedTime = Date.now() - startTime;
    timerElement.textContent = `上传失败！已耗时：${formatTime(elapsedTime)}`;
  }

  function abortHandler(event) {
    // 新增：上传中断时的计时处理
    const elapsedTime = Date.now() - startTime;
    timerElement.textContent = `上传已取消！已耗时：${formatTime(elapsedTime)}`;
  }
}

关键说明： #

• 添加计时元素：你需要在HTML页面中新增一个用于显示时间的元素，比如 <div id="upload-timer">等待上传...</div>
• 时间格式化：formatTime 函数将毫秒数转换为易读的时:分:秒格式，不足两位的数字自动补0
• 全场景覆盖：覆盖了上传过程中的进度更新、完成、出错、中断四种场景，保证计时逻辑的完整性
• 作用域隔离：startTime 定义在uploadFile函数内部，避免多个上传请求之间的计时干扰

如果你的progressHandler、completeHandler等函数原本是定义在外部的，只需要把startTime和timerElement调整为全局变量（或通过参数传递），再把时间计算逻辑嵌入对应函数即可。

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