Perview Image in next img Tag Javascript

45 views Asked by At

i want to preview Image in img tag that is after my input
My Html

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

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



but i get error portfolio:766 Uncaught TypeError: input.next is not a function

1

There are 1 answers

1
ihor.eth On BEST ANSWER

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

source: MDN