多文件输入设置多div背景图及重置功能技术问询

1. 添加第二个file input为.logo类DIV设置背景图 #

既然你已经搞定了.background的背景图设置，咱们直接复用类似逻辑，给.logo也搭一套对应的输入和处理流程就行：

第一步：更新HTML结构 #

在现有代码基础上，新增一套对应.logo的输入组：

<!-- 原有的.background相关输入 -->
<div class="input-group">
  <label for="background-input">选择背景图:</label>
  <input type="file" id="background-input" accept="image/*">
</div>
<div class="background"></div>

<!-- 新增的.logo相关输入 -->
<div class="input-group">
  <label for="logo-input">选择Logo图:</label>
  <input type="file" id="logo-input" accept="image/*">
</div>
<div class="logo"></div>

第二步：扩展JavaScript逻辑 #

我建议写个通用函数来处理文件选择和背景图设置，避免重复写冗余代码：

// 通用函数：绑定文件输入与目标DIV的背景图设置
function bindBackgroundInput(fileInputId, targetSelector) {
  const fileInput = document.getElementById(fileInputId);
  const targetDiv = document.querySelector(targetSelector);

  fileInput.addEventListener('change', function(e) {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      const reader = new FileReader();
      reader.onload = function(event) {
        targetDiv.style.backgroundImage = `url(${event.target.result})`;
      };
      reader.readAsDataURL(selectedFile);
    }
  });
}

// 初始化两个输入框的绑定
bindBackgroundInput('background-input', '.background');
bindBackgroundInput('logo-input', '.logo');

这样既保持了代码整洁，又能分别处理两个不同的DIV，以后再加新的也能直接调用这个函数。

2. 添加删除链接重置对应背景图 #

接下来给每个输入组加个删除按钮，点击后清空文件并重置背景：

第一步：更新HTML，添加删除链接 #

给每个输入组加上带data-*属性的删除链接（用属性存目标信息，不用写重复事件）：

<div class="input-group">
  <label for="background-input">选择背景图:</label>
  <input type="file" id="background-input" accept="image/*">
  <a href="#" class="reset-btn" data-target=".background" data-input="background-input">删除背景图</a>
</div>
<div class="background"></div>

<div class="input-group">
  <label for="logo-input">选择Logo图:</label>
  <input type="file" id="logo-input" accept="image/*">
  <a href="#" class="reset-btn" data-target=".logo" data-input="logo-input">删除Logo图</a>
</div>
<div class="logo"></div>

第二步：添加删除按钮的事件监听 #

用一个通用事件处理所有删除按钮：

// 批量绑定删除按钮事件
document.querySelectorAll('.reset-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止链接默认跳转行为
    
    // 从data属性里拿目标信息
    const targetDiv = document.querySelector(this.dataset.target);
    const fileInput = document.getElementById(this.dataset.input);
    
    // 重置背景图和文件输入
    targetDiv.style.backgroundImage = 'none';
    fileInput.value = ''; // 清空输入，这样可以重新选择同一张图
  });
});

这个逻辑很灵活，以后再加其他需要设置背景的DIV，只要按这个结构加输入框和删除按钮，功能就能自动生效。

如果你的现有代码里有特殊的样式或额外处理逻辑，把通用函数和你的代码结合调整就行，核心就是区分不同的输入源和目标元素，用复用性高的写法减少重复工作量。

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