从用户到网站显示输入图像

Question

我正在创建一个社交媒体应用程序。 我从用户那里得到了图像输入，但我一直在显示图像。

这是我的 HTML 文件

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

这是我的 JS 文件

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;
}

Answer 1

使用 FileReader 对象创建一个 blob 并将其附加到元素。

例子：

        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]);