如何在页面添加第二个[type=file]输入，将图片设为指定div背景？

没问题，我帮你补全并调整代码，轻松实现第二个文件上传控件的功能——把选中的图片设置为id="logo"的div背景图。

完整代码实现 #

首先是HTML部分（你已经有了，这里再明确一下）：

<!-- 第二个文件上传控件 -->
<input type='file' id='getval' name="logo" accept="image/*" />
<!-- 要设置背景图的目标div -->
<div id="logo" style="width: 200px; height: 200px; border: 1px solid #ccc;"></div>

然后是JavaScript部分，我们写一个通用的函数来处理文件读取和背景设置，这样以后再新增类似控件也能复用：

// 给第二个上传控件绑定change事件
document.getElementById('getval').addEventListener('change', function() {
  // 传入当前控件和目标div的选择器
  setDivBackground(this, '#logo');
}, true);

// 通用函数：读取上传的图片并设置为指定div的背景
function setDivBackground(input, targetSelector) {
  // 检查是否有选中的文件
  if (input.files && input.files[0]) {
    const reader = new FileReader();
    
    // 文件读取完成后触发
    reader.onload = function(e) {
      const targetDiv = document.querySelector(targetSelector);
      // 设置背景图
      targetDiv.style.backgroundImage = `url(${e.target.result})`;
      // 优化背景显示效果（可选，根据需求调整）
      targetDiv.style.backgroundSize = 'cover';
      targetDiv.style.backgroundPosition = 'center';
      targetDiv.style.backgroundRepeat = 'no-repeat';
    }
    
    // 把文件转成DataURL格式
    reader.readAsDataURL(input.files[0]);
  }
}

代码说明 #

• 我们给id="getval"的上传控件绑定了change事件，用户选中图片后就会触发处理逻辑。
• setDivBackground是通用函数，接收两个参数：当前的文件输入控件，以及要设置背景的div选择器，这样你可以用它处理任意上传控件对应任意div的场景。
• 用FileReader读取选中的图片文件，转成DataURL格式后，直接赋值给目标div的backgroundImage属性。
• 额外添加的backgroundSize、backgroundPosition等样式是为了让背景图显示更美观，你可以根据自己的需求修改或删除这些样式。

如果你的页面上已经有第一个上传控件的处理代码，也可以把它改成调用这个通用函数，比如：

// 假设第一个上传控件id是"bgUpload"，目标div id是"mainBg"
document.getElementById('bgUpload').addEventListener('change', function() {
  setDivBackground(this, '#mainBg');
}, true);

这样代码更简洁，也更容易维护~

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