get uploaded image width & height for loding actual image size

Question

我如何上传图片的高度和宽度，以原始尺寸显示。

Answer 1

Keeping in mind what Brad said (this appears to be server-side functionality), You can use this php code, but you should verify first that the uploaded file really is an image.

list($w, $h) = getimagesize($_FILES['yourUploadedFieldName']);

// $w holds the numeric width
// $h holds the numeric height

Answer 2

In a case of client-size, you can use the following:

;(function($){
    $.imageSize = function(imgUrl,callback){
        var img = $('<img>').attr('src',imgUrl).css('display','none').appendTo('body');
        img.load(function(){
            var call = callback || function(i,w,h){};
            call(imgUrl,$(this).width(),$(this).height());
        });
    };
})(jQuery);

( jQuery plugin) You can't get the image size until it's been loaded, but if you load it up in the background and wait for it, you'll be able to access the information. eg

$.imageSize('http://www.nasa.gov/images/content/511786main_image_1848_946-710.jpg',function(i,w,h){
    alert(i+'\r\n'+w+'x'+h);
});

Answer 3

getimagesize应该可以解决问题，请查看更多文档http://php.net/manual/zh/function.getimagesize.php

Answer 4

If you dont specify a height and width the img tag will display an image in its correct size

the following will display mypic.jpg full size

<img src='mypic.jpg' >

or this will display the image with width 200px and height in ratio

<img src='mypic.jpg' width="200px" >

Answer 5

If you use the Prototype Javascript library :

var img = new Element(
 'img', {
  src: 'image.jpg'
 }
);

img.observe(
 'load',
 function(event) {
  alert(
   Event.element(event).getWidth() + 
   'x' + 
   Event.element(event).getHeight()
  );
 }
);

$$('body').first().appendChild(img);
img.remove();

Answer 6

如果img标签没有width和height属性，并且css没有为它定义样式的宽度和高度，则图像将以“自然”尺寸呈现。