# [Jquery,JavaScript]  how to determine the size (in kb) pictures / images?



## ProFTP (Aug 1, 2010)

how to determine the size (in kb) pictures / images?

size width and length of work:

```
var newImg = new Image();
		var height, width;

		newImg.onload = function() {
    	height = newImg.height;
    	width = newImg.width;

		};

		newImg.src = 'file://localhost/usr/home2/di/11/p/29/1.jpg'; 

   	var height = newImg.height;
    	var width = newImg.width;

    	var size = newImg.size;
  	

					
    alert ('The image size is '+size+'*'+height);					
					
		  $(".info").html( " "+width+" x "+height+", "+size+" ÐšÐ±Ð°Ð¹Ñ‚ ");
```


and how to determine precisely the size of the picture in the kb?

seemingly CSS DOM keeps this ...?

very desirable to determine the size of Javascript ...


----------



## darkshadow (Aug 1, 2010)

*hi*

are you trying to know the image size before loading it , as web developer I didnt done that in js I even review my information about image object and there is not size attribute , by the way why you need that for maybe I can help http://www.devguru.com/technologies/ecmascript/quickref/image.html .


----------



## ProFTP (Aug 2, 2010)

works:


```
var newImg = new Image();
		var height, width;

		newImg.onload = function() {
    	height = newImg.height;
    	width = newImg.width;

		};

	newImg.src = 'http://x0.org.ua/test/p/29/1.jpg'; 


function getImageSizeInBytes(imgURL) {
    var request = new XMLHttpRequest();
    request.open("HEAD", imgURL, false);
    request.send(null);
    var headerText = request.getAllResponseHeaders();
    var re = /Content\-Length\s*:\s*(\d+)/i;
    re.exec(headerText);
    return parseInt(RegExp.$1);
}


   	var height = newImg.height;
    	var width = newImg.width;		
    	

   var size_image = getImageSizeInBytes('http://x0.org.ua/test/p/29/1.jpg');

 size_image = size_image / 1000; 


//	alert(getImageSizeInBytes('http://x0.org.ua/test/p/29/1.jpg'));				
					
//    alert ('The image size is '+size+'*'+height);					
					


		  $(".info").html( " "+width+" x "+height+", "+size_image+"  kb ");
```




I wish to add in the Open source gallery, here's her site http://www.twospy.com/galleriffic


http://x0.org.ua/gallery_test/index.html
and help protestirvoat on different browsers?

in my buggy, it often for some reason or not?

Please click a few times (3-6 times) on the thumbs and the big picture ... OK, right? seen whether the resolution and size always?


----------



## darkshadow (Aug 2, 2010)

but you are doing ajax request on each photo to know it is size (if there is not good caching there ) you get the image two times .
if you want you can calculate  image size on server side and send back with image link 

```
[{size : '30' , name : 'flowers' , link : '/a/s.jpg' } ,{size : '30' , name : 'flowers2' , link : '/a/s.jpg' } ]
```
then you can add more info 
or your galary item can hold  these info :

```
<img class="size_20"  href="a/do.jpg" />
```
you can use title instead of class this will case the the browser to pop the image with info
if you want great tools for all of this use "jquery tools" small and have rish api


----------



## ProFTP (Aug 2, 2010)

but look at this gallery http://x0.org.ua/gallery_test/index.html is not working properly on different browsers on different buggy??





			
				darkshadow said:
			
		

> but you are doing ajax request on each photo to know it is size (if there is not good caching there ) you get the image two times .
> if you want you can calculate  image size on server side and send back with image link
> 
> ```
> ...







yes, good will implement ...


======

but now in my gallery fail badly, try on different browsers??

*opera9:*

```
462 x 600, NaN ÐšÐ±Ð°Ð¹Ñ‚
```

*firefox3.0*

```
462 x 600, 126.792 ÐšÐ±Ð°Ð¹Ñ‚
```
etc


----------

