Perview Gambar di img Tag Javascript berikutnya

Question

Saya ingin melihat gambar dalam tag img setelah saya memasukkan
Html saya

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

JS saya

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

tetapi saya mendapatkan portofolio kesalahan: 766 TypeError Tidak Tertangkap: input.next bukan sebuah fungsi

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

sumber: MDN