Question

我想使用javascript警告图像的宽度和高度，但不知道我该怎么办？

<input name="banner_img_ads" type="file" onchange="updateInput_banner_img_ads(this.value)">
<script>
function updateInput_banner_img_ads(image_dimension){
    var file, img;
    if ((file = image_dimension.files[0])) {
        img = new Image();
        img.onload = function() {
            alert(image_dimension.width + " " + image_dimension.height);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);
    }
}
</script>

Answer 1

您已将this.value传递给该函数，因此image_dimension是输入的值，而不是输入本身。

如果您使用适当的事件监听器，则更容易

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是我的解决方案。希望它有所帮助！

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;"/>

为什么我的支票图像尺寸功能无法使用onchange dom javascript？

2 个答案: