如何用户输入图像到div

Question

I want to add the input file from html as a image inside a div however I don't want to use get element buy class name because I have multiple divs and for each one I want to add special image. if I use any selector the image will be added to each div any one can help. Thanks

I use this, this will change the image to all div having this class but I want to add a special img to each div

edit: iam creating a new div each time and i want for each div I created to add a special img

here is the full code to create new div and to add pic

mainspan.onclick = () => { // mainspan is button used to create div

let div = document.createElement("div");
div.classList.add("main-dd"); let button = document.createElement("button"); let img = document.createElement("img"); img.classList.add("currentimg");
div.appendChild(img); button.classList.add("btnaddinfo");
button.innerHTML = "Add item"; button.addEventListener("click", () => { addinfo.style.display = "block"; // the menue to add the new picture }); div.appendChild(button);

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

uploadPictureButton.addEventListener("change", 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

You probably want to use 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/>