使用相同的javascript函数更改多张图片上传的预览

<div class="image-container">
  <input type="file" class="image-upload" multiple>
  <div class="image-preview"></div>
</div>
<div class="image-container">
  <input type="file" class="image-upload" multiple>
  <div class="image-preview"></div>
</div>
<!-- 可以根据需要添加更多的图片上传容器 -->

// 获取所有图片上传容器
const imageContainers = document.querySelectorAll('.image-container');

// 遍历每个图片上传容器
imageContainers.forEach(container => {
  // 获取文件选择器和预览元素
  const fileInput = container.querySelector('.image-upload');
  const preview = container.querySelector('.image-preview');

  // 监听文件选择器的change事件
  fileInput.addEventListener('change', () => {
    // 清空预览元素
    preview.innerHTML = '';

    // 遍历选择的文件
    Array.from(fileInput.files).forEach(file => {
      // 创建一个新的图片元素
      const img = document.createElement('img');
      img.src = URL.createObjectURL(file);
      img.alt = file.name;

      // 将图片元素添加到预览元素中
      preview.appendChild(img);
    });
  });
});