如何实现选择文件时逐个堆叠显示不同的selected-file-container

HTML 结构 #

先调整布局，新增一个容器统一存放所有已选文件的条目，把文件选择按钮放在这个容器下方：

<div class="container mt-4">
  <!-- 存放已选文件的容器 -->
  <div id="file-list-container" class="mb-3"></div>
  
  <!-- Bootstrap 风格的文件选择按钮 -->
  <label for="image-upload" class="btn btn-primary">
    <i class="bi bi-plus-circle"></i> 选择图片
  </label>
  <input type="file" id="image-upload" class="d-none" accept="image/*" multiple>
</div>

CSS 样式（优化条目显示） #

给每个文件条目添加基础样式，让布局更规整：

.selected-file-container {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  background-color: #f8f9fa;
}

.selected-file-container .file-icon {
  font-size: 1.25rem;
  color: #0d6efd;
  margin-right: 0.75rem;
}

.selected-file-container .file-name {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-file-container .delete-btn {
  color: #dc3545;
  cursor: pointer;
}

JavaScript 逻辑 #

修改原有逻辑，每次选择文件时生成独立的条目容器，并追加到列表末尾（确保最新文件显示在最下方）：

const uploadInput = document.getElementById('image-upload');
const fileListContainer = document.getElementById('file-list-container');

uploadInput.addEventListener('change', function(e) {
  const files = e.target.files;
  
  // 遍历所有选中的文件
  for (const file of files) {
    // 创建新的文件条目容器
    const fileItem = document.createElement('div');
    fileItem.className = 'selected-file-container';
    
    // 填充条目内容：图标、文件名、删除按钮
    fileItem.innerHTML = `
      <i class="bi bi-file-earmark-image file-icon"></i>
      <span class="file-name">${file.name}</span>
      <i class="bi bi-x-circle delete-btn"></i>
    `;
    
    // 添加删除功能
    const deleteBtn = fileItem.querySelector('.delete-btn');
    deleteBtn.addEventListener('click', function() {
      fileItem.remove();
    });
    
    // 将新条目追加到列表容器末尾，最新条目会显示在最下方
    fileListContainer.appendChild(fileItem);
  }
  
  // 清空输入框值，允许重新选择同一文件
  uploadInput.value = '';
});

关键说明 #

1. 独立条目容器：每次选文件时为每个文件生成新的selected-file-container，彻底避免覆盖问题
2. 末尾追加机制：用appendChild()将新条目放在容器最后，确保最新选择的文件紧邻按钮，位于所有已选条目的最下方
3. 重复选择兼容：清空输入框值，解决选择同一文件无法触发change事件的问题
4. 可选删除功能：添加删除按钮，方便用户移除不需要的已选文件

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