Vorschaubild im nächsten Bild Tag Javascript

Question

Ich möchte eine Vorschau des Bildes im img-Tag anzeigen, das sich nach meiner Eingabe in
My Html befindet

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

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

aber ich erhalte Fehlerportfolio: 766 Uncaught TypeError: input.next ist keine Funktion

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

Quelle: MDN