Perview Image trong Javascript thẻ img tiếp theo

Question

tôi muốn xem trước Hình ảnh trong thẻ img nằm sau khi tôi nhập
Html của tôi

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

JS của tôi

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

nhưng tôi nhận được danh mục lỗi: 766 Uncaught TypeError: input.next không phải là một hàm

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

nguồn: MDN