How to user-input image to 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]);

  } }

if you really want to be that specific then add an id to each div and get each element by their id, then proceed to add the img you want to each of them — Chris G
– Chris G, Commented Jan 31, 2023 at 16:52
@ChrisG thank you but the problem is that i use a button to create a div . then to this new added div Iam trying to add an image , if you understand my issue — ahmad ghzayel
– ahmad ghzayel, Commented Jan 31, 2023 at 16:56
you can give your div an id the moment you create it. Is there a limit for how many divs you can create? — Chris G
– Chris G, Commented Jan 31, 2023 at 17:00

Bobby Morelli · Accepted Answer · 2023-01-31 17:19:37Z

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/>

answered Jan 31, 2023 at 17:19

Bobby Morelli

5954 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to user-input image to div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related