CODEWITHSUNDEEP
jqueryimage
DrXCheng
DrXCheng

Reputation: 4132

How to get image size before loading in jQuery?

I am using jQuery+AJAX to upload image and then generate html to show it. After successfully uploading the image, the AJAX gets the image filename. I want to get the image's dimension ratio before actually loading it. Otherwise, if I load the image and use .width() and .height(), it will return 0 as it will take some time to load the image.

Is there any function in jQuery like getimagesize(filename) of PHP?

* edit *

Sorry for the confusion! I want a function in js not in PHP, and the function is like getimagesize(filename) of PHP.

* edit again *

I post the simplified code here:

var html = '<img id="photo' +  id + '" src="' + filename + '" />';
$('#photos li:last').html(html);
var e = $('#photo' + id);
(e.width() / e.height() > 1.6) ? e.attr('width', 160): e.attr('height', 100);

Problem here is .width() and .height() are both 0. if using clientWidth and clientHeight, they are undefined.

Upvotes: 0

Views: 6561

Answers (3)

Diego Montt
Diego Montt

Reputation: 11

why not passing a json object from the php file I assume you are ussing to upload the image? like status (uploaded, error, etc), x (width), y (height), etc.

then you could use it in the ajax callback.

Upvotes: 1

adeneo
adeneo

Reputation: 318202

var e = $('#photo' + id);
e.load(function() {
   (e.width() / e.height()) > 1.6 ? e.attr('width', 160): e.attr('height', 100);
});

Upvotes: 5

Rylab
Rylab

Reputation: 1295

Did you check the PHP Manual before asking this question? There is a function in PHP which does exactly that, with the exact name you guessed:

http://php.net/manual/en/function.getimagesize.php

Upvotes: 2

Related Questions