如何为动态创建的每个独立div添加专属上传图片？

问题核心：你现在用document.querySelector(".currentimg")只会选中页面中第一个带该类的img，且每次创建Div时都给新img加同一个类，导致上传的图片只会替换第一个img的内容，无法对应到当前操作的Div。

直接按以下思路修改代码即可：点击某个Div的"Add item"按钮时，记住该Div内的img元素，上传图片时直接将图片赋值给这个被记住的img

修改后的完整代码 #

// 定义变量存储当前要修改的目标img
let currentActiveImg = null;

mainspan.onclick = () => {
  let div = document.createElement("div");
  div.classList.add("main-dd");
  
  let img = document.createElement("img");
  img.classList.add("currentimg");
  div.appendChild(img);
  
  let button = document.createElement("button");
  button.classList.add("btnaddinfo");
  button.innerHTML = "Add item";
  
  // 关键改动：点击按钮时，把当前Div对应的img存入变量
  button.addEventListener("click", () => {
    addinfo.style.display = "block";
    currentActiveImg = img;
  });
  
  div.appendChild(button);
  // 把创建好的Div添加到页面（原代码遗漏此步骤，需补上）
  document.body.appendChild(div);
};

// 上传事件仅绑定一次，无需重复绑定
const uploadPictureButton = document.querySelector(".photo-upload");
uploadPictureButton.addEventListener("change", function () {
  displayPicture(this);
});

function displayPicture(input) {
  // 先判断是否有选中目标img
  if (!currentActiveImg) return;
  
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function (e) {
      // 直接给目标img设置src，避免全局选择元素
      currentActiveImg.setAttribute("src", e.target.result);
    };
    
    reader.readAsDataURL(input.files[0]);
  }
}

改动说明 #

• 新增currentActiveImg变量，专门存储当前操作的Div对应的img元素，彻底避免类选择器的全局查找问题
• 点击"Add item"按钮时，将当前Div内的img赋值给currentActiveImg，明确本次上传的目标对象
• 上传事件仅绑定一次，删除原代码中重复的事件绑定逻辑
• displayPicture函数增加前置判断，确保有目标img时再执行赋值操作，避免无效执行

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