Dynamically Grab Image Dimensions?

Grabbing image dimensions for images on the fly

[ZakAltF4]

Hello again all! I got my upload script working great!

I have one last thing I'd like to try to figure out ... I would like to know the image dimensions of the image dynamically loaded via the upload ... And I would like the original file dimensions, not as they appear in the element. Is there a way to do this? The call for image dimensions would go in the commented section of the code below.. I've tried a lot of google-ing, and have come up empty handed. I can grab sizes of images already loaded, or off the server (which I can't do because it doesn't upload until the script finishes). So my understanding is that I need to grab the dimensions possibly before the transfer of data to "upload-file.php" .. But I'm not sure. I am seeing fuzzy right now!

<script>
var pic_real_width, pic_real_height, img;
$(function(){

var btnUpload=$('#upload');
var status=$('#status');
var imgWidth;
var imgHeight;
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
          // extension is not allowed 
status.text('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
if(response==="success"){
  iid = iid + 1;

$('<li></li>').appendTo('#files').html('<div id="UpIm' + iid + '"><img src="./uploads/'+file+'" alt="" id=ImageId"' + iid + '"/><br />'+file + '</div>').addClass('success');
//Somehow get image demensions of non loaded image ----
$("#UpIm" + iid).append('<br>W: ' + iwidth + '&nbsp;&nbsp;&nbsp;H: ' + iheight); //add image dimensions to div


} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});

});

-- Zak

[rocknbil]

You can't do this due to security policies of browsers (at least, not with Javascript and not with the file upload object.) Imagine if you could read the user's original image size. This, inherently, wold mean you could read the path on their local computer. You could then use that to do other nasty stuff. You would then be able to read other files too. Big security hole.

You can do this with Flash, Java (not JavaSCRIPT,) and ActiveX controls which the user has allowed to be installed and allowed to access the local system to some degree.

You can upload the file without resizing, grab the original dims server side, then do your resizing and delete the original.

[ZakAltF4]

OK ... I will try another route. This is all written in Jquery.. hmmm Is there a way to check image dimensions once they reside on the server with Jquery? I have this thing almost completely built, and don't want to have to incorporate flash or AcitveX at this point if you know what I mean ..

[rainborick]

No. jQuery is still JavaScript. You can't really examine the image file until it reaches your server unless you use one of the solutions rocknbil suggested.

[penders]

This is all written in Jquery..

Presumably you are using PHP to manage the upload?

Is there a way to check image dimensions once they reside on the server with Jquery?

...And I would like the original file dimensions, not as they appear in the element. ... I can grab sizes of images already loaded, or off the server...

You seem to have answered this yourself? If the image is on the server then you can load it in an image element and read the dimensions (the original dimensions providing you don't set the width/height of the img element in HTML or CSS) using JavaScript.

But as rocknbil states, your PHP upload script could do this.

[ZakAltF4]

Yes, exactly. I Loaded the image via Javascript to my php document for upload, and returned the value via php.. The trick was not needing the page to reload, but a little research goes a long way. Thanks for your help!