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

<input type="file" id="tt" name="tt" >

有人知道当我上传400X400图片时，如何在警报框中获得400作为高度和400作为宽度。任何帮助都非常感谢.....

Answer 1

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

请查看以下代码段以获取更多理解。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

var nheight = img.clientHeight;
var nwidth = img.clientWidth;

将为您提供维度。

参考 -

尝试

var x = document.getElementById("myImg").naturalWidth;

用于返回图像原始高度的naturalHeight属性，或用于设置或返回图像高度属性值的height属性

http://www.w3schools.com/jsref/prop_img_naturalwidth.asp

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

2 个答案: