homepage Welcome to WebmasterWorld Guest from 54.161.210.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Dynamically Grab Image Dimensions?
Grabbing image dimensions for images on the fly
ZakAltF4



 
Msg#: 4407471 posted 9:48 pm on Jan 16, 2012 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4407471 posted 5:35 pm on Jan 17, 2012 (gmt 0)

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



 
Msg#: 4407471 posted 6:27 pm on Jan 17, 2012 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4407471 posted 2:44 am on Jan 18, 2012 (gmt 0)

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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4407471 posted 3:48 pm on Jan 18, 2012 (gmt 0)

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



 
Msg#: 4407471 posted 4:34 pm on Jan 19, 2012 (gmt 0)

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved