获取图像尺寸（高度和宽度）Js或jquery

Question

我已经搜索过这个，但是每次我实现代码时，当我上传400X400图像时，它都会返回 24 作为高度和宽度作为 237。

$(document).on('change','#tt' , function(){
    var img = document.getElementById('tt');
    var nheight = img.clientHeight;
    var nwidth = img.clientWidth;
    alert(nheight)
    alert(nwidth)
});

$(document).on('change','#tt' , function(){
    var img = document.getElementById('tt');
    var nheight = img.clientHeight;
    var nwidth = img.clientWidth;
    alert(nheight)
    alert(nwidth)
});

有谁知道当我上传图像时如何在警报框中获得 400 的高度和 400 的宽度400X400。非常感谢任何帮助......

Answer 1

文件上传的 onchange 事件创建一个 Image 对象并将上传的文件对象作为 src 附加到图像对象，然后图像对象的 onload 事件查找图像的高度和宽度。

请检查下面的代码片段以获取更多理解。

var _URL = window.URL || window.webkitURL;
$(document).on('change','#tt' , function(){    
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            alert("width : "+this.width + " and height : " + this.height);
        };
        img.src = _URL.createObjectURL(file);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="tt" name="tt" >