如何用户输入图像到div

Question

我想将来自 html 的输入文件作为图像添加到 div 中，但是我不想使用 get element buy class name 因为我有多个 div，并且我想为每个 div 添加特殊图像。 如果我使用任何选择器，图像将被添加到每个 div 中，任何人都可以提供帮助。 谢谢

我使用它，这会将图像更改为具有此 class 的所有 div，但我想为每个 div 添加一个特殊的 img

编辑：我每次都创建一个新的 div，我想为我创建的每个 div 添加一个特殊的 img

这是创建新 div 和添加图片的完整代码

mainspan.onclick = () => { // mainspan 是用来创建 div 的按钮

让 div = document.createElement("div");
div.classList.add("main-dd"); 让按钮 = document.createElement("按钮"); 让 img = document.createElement("img"); img.classList.add("currentimg");
div.appendChild(img); button.classList.add("btnaddinfo");
button.innerHTML = "添加项目"; button.addEventListener("click", () => { addinfo.style.display = "block"; // 添加新图片的菜单 }); div.appendChild(按钮);

const uploadPictureButton = document.querySelector(".photo-upload");

uploadPictureButton.addEventListener("更改", function () { displayPicture(this); });

function displayPicture(input) { if (input.files && input.files[0]) { var reader = new FileReader();

 reader.onload = function (e) { document.querySelector(".currentimg").setAttribute("src", e.target.result); }; reader.readAsDataURL(input.files[0]); } } }; })

 document.querySelector(".photo-upload"); uploadPictureButton.addEventListener("change", function () { displayPicture(this); }); let a; function displayPicture(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { document.querySelector(".currentimg").setAttribute("src", e.target.result); }; reader.readAsDataURL(input.files[0]); } }

Answer 1

您可能想使用URL.createObjectURL

 document.querySelector("input").addEventListener("change",event=>{ document.querySelector("img").src = URL.createObjectURL(event.target.files[0]); })

 body { display: grid; grid: 1fr 1fr / 1fr; } img { width:4em; height: 4em; }

 <input type="file" accept="image/png, image/jpeg"/> <img/>