Perview Image ใน img ถัดไป Tag Javascript

Question

ฉันต้องการดูตัวอย่างรูปภาพในแท็ก img ที่อยู่หลังการป้อน
Html ของฉัน

          <input name="image" type="file"  id="uploadImage"  onchange="PreviewImage(this);" />
          <img id="uploadPreview" style="width: 100px; height: 100px;" />

JS ของฉัน

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

            reader.onload = function (e) {
                     var imageObj=input.next();
consolde.log(imageObj);
                input.next('img').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

แต่ฉันได้รับผลงานข้อผิดพลาด: 766 Uncaught TypeError: input.next ไม่ใช่ฟังก์ชัน

Answer 1

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">  

JS

function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // convert image file to base64 string
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

ที่มา: MDN