Why Does My Check Image Dimension Function Not Work With Onchange Dom Javascript?

I want to alert width and height of image using javascript but not word how can i do ? https://jsfiddle.net/5ajak14c/ this.value to the function, so image_dimension is the value of the input, not the input itself.

If you use a proper event listener, it's easier

document.getElementById('banner_img_ads').addEventListener('change', function() {
  var file = this.files[0], img;

  if (file) {
    img = new Image();
    img.onload = function() {
      alert(this.width + " " + this.height);
    };
    img.onerror = function() {
      alert("not a valid file: " + file.type);
    };
    img.src = URL.createObjectURL(file);
  }
});

<input name="banner_img_ads" id="banner_img_ads" type="file" />

Solution 2:

Here's my solution. Hope it helps!

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
                alert($('#blah').width() + " " + $('#blah').height());
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    
function myFunction(input) {
    readURL(input);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type='file' id="imgInp" onChange = "myFunction(this)"/>
<img id="blah" src="#" style = "display:none;"/>