多上传文件时长功能优化：总时长统计与删除同步更新需求

没问题！我帮你调整了代码，不仅保留了单个文件时长的展示，还新增了总时长统计（hh:mm:ss格式）和文件删除同步更新时长的功能。下面是完整的可运行代码片段，我加了详细注释帮你理解逻辑：

HTML 结构 #

<div class="upload-container">
  <input type="file" id="fileInput" multiple accept="video/*,audio/*">
  <div id="fileList" class="file-list"></div>
  <div class="total-duration">
    总时长：<span id="totalTime">00:00:00</span>
  </div>
</div>

CSS 样式（简单美化） #

.upload-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.file-list {
  margin: 20px 0;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.delete-btn {
  background-color: #ff4444;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.delete-btn:hover {
  background-color: #cc0000;
}

.total-duration {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 20px;
}

JavaScript 核心逻辑 #

// 存储所有上传文件的时长（秒），用于追踪和更新总时长
let fileDurations = [];
// 总时长（秒）
let totalSeconds = 0;

const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
const totalTimeEl = document.getElementById('totalTime');

// 把秒数格式化为 hh:mm:ss 格式
function formatDuration(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);
  // 补零处理，确保每个时间部分都是两位数
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

// 更新页面上的总时长显示
function updateTotalDuration() {
  totalTimeEl.textContent = formatDuration(totalSeconds);
}

// 获取单个音视频文件的时长（秒）
function getFileDuration(file) {
  return new Promise((resolve) => {
    const media = document.createElement('video');
    media.preload = 'metadata';
    media.onloadedmetadata = () => {
      media.pause(); // 避免自动播放
      resolve(media.duration);
    };
    // 创建临时URL加载文件
    media.src = URL.createObjectURL(file);
  });
}

// 处理文件上传事件
fileInput.addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  
  for (const file of files) {
    const duration = await getFileDuration(file);
    const durationSeconds = Math.floor(duration);
    
    // 记录当前文件时长并累加总时长
    fileDurations.push(durationSeconds);
    totalSeconds += durationSeconds;
    
    // 创建文件展示项
    const fileItem = document.createElement('div');
    fileItem.className = 'file-item';
    fileItem.dataset.duration = durationSeconds; // 把时长存在DOM属性里，删除时方便获取
    
    // 文件名称+单个时长
    const fileInfo = document.createElement('span');
    fileInfo.textContent = `${file.name} - ${formatDuration(durationSeconds)}`;
    
    // 删除按钮
    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'delete-btn';
    deleteBtn.textContent = '删除';
    deleteBtn.addEventListener('click', () => {
      // 扣除当前文件的时长
      const removeDuration = parseInt(fileItem.dataset.duration);
      totalSeconds -= removeDuration;
      // 从数组中移除对应时长
      const index = fileDurations.indexOf(removeDuration);
      if (index !== -1) {
        fileDurations.splice(index, 1);
      }
      // 更新总时长显示并移除DOM元素
      updateTotalDuration();
      fileItem.remove();
    });
    
    // 组装并添加到文件列表
    fileItem.appendChild(fileInfo);
    fileItem.appendChild(deleteBtn);
    fileList.appendChild(fileItem);
  }
  
  // 上传完成后更新总时长
  updateTotalDuration();
});

关键逻辑说明 #

1. 时长格式化：formatDuration函数负责把原始秒数转换成标准的hh:mm:ss格式，用padStart保证每个时间位都是两位数；
2. 总时长维护：用totalSeconds变量实时累加/扣除文件时长，确保总时长始终准确；
3. 删除同步：删除按钮点击时，从总时长中扣除对应文件的时长，同时更新存储数组和页面显示；
4. 文件时长获取：通过创建临时video元素加载文件元数据，这是前端获取音视频文件时长的常规方案。

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