Displaying input image form the user to website-CodePudding

I'm creating a social media application. I got the image input from the user, but I was stuck in displaying the image.

Here is my HTML file

<form id="form">
   <div id="closeForm"><i class="fas fa-window-close"></i></div>
   <label>
     <p>Enter the title:</p>
     <input id="newTitle" placeholder="Art Title" type="text">
   </label>
   <label>
     <p>Select your image:</p>
     <input id="newImg" class="imgInput" accept="image/*" type="file">
   </label>
   <input id = "formBtn" type="button" acc value="Upload">
</form>

This is my JS file

document.getElementById('formBtn').onclick=()=>{
    let newTitle = document.getElementById('newTitle').value;
    let newImg =  document.getElementById('newImg').value;

    let fragment = `
       <img class="art_img" src="${newImg}" alt="" srcset="">
       <p id="title">${newTitle}</p>`;

artContainer.innerHTML =fragment;
}

CodePudding user response：

Use the FileReader object to create a blob and attach it to the element.

Example:

        const reader = new FileReader();
        reader.onload = (e) => {
                imgElm.src = e.target.result;
        };
        // do some checks to make sure its not empty
        reader.readAsDataURL(input.files[0]);