用javascript / jquery获取上传的图片尺寸？

Question

也试试这个，但对我来说它不起作用。

Determining image file size + dimensions via Javascript?

我上传图片，通过jquery将其插入页面，并希望在插入的图片周围创建div，但不知道图片尺寸。

$("#temp_image").html('<img src="uploads/obr1.jpg" alt="" id="tmp" />');
var img = document.getElementById('temp_image');
alert(img.clientWidth);

它告诉我0，出了什么问题？

也尝试过：

var oImg = new Image();
oImg.src = 'uploads/obr1.jpg;
if (oImg.complete) {
  alert(oImg.width)
} 

它也显示我0。

哪里有问题？感谢

Answer 1

应该是：

$("#temp_image").html('<img src="uploads/obr1.jpg" alt="" id="tmp" />');
var img = document.getElementById('tmp');
alert(img.clientWidth);

您目前正在尝试获取包含div（#temp_image）的宽度，而不是图像。

另外，如果你使用的是jQuery，你可以这样做：

$("#temp_image").html('<img src="uploads/obr1.jpg" alt="" id="tmp" />');
alert($('#tmp').width());

希望这有帮助！

Answer 2

var img = document.getElementById('temp_image');

实际上并没有为您提供图像元素，它获取包含图像的元素。你应该试试

var img = document.getElementById('tmp');

或

var img = $('#tmp')[0];

代替。当你获得它的尺寸时，还要确保图像实际可见，因为如果元素被隐藏，clientWidth和clientHeight将为零。

Answer 3

我尝试了你的方法并且它正在工作。你刚刚写得不好。你忘了关闭引号。

var oImg = new Image();
oImg.src = 'uploads/obr1.jpg';
if (oImg.complete) {
  alert(oImg.width)
}