2

Alright so here it goes, I have my user system working perfectly, and now in the edit profile, I'm trying to add a change avatar URL option.

At the moment it's working great, but for pageloads time and such, I'm looking to restrain the normal users to a maximum of 300px images width, and let's say around 500px height, that are then resized in

So basically, I just want a javascript function to verify the URL of an image (entered in a textbox) and if it is over the size I want, well the user gets an alert saying remote image too big & the process ends there.

I tried several ways, but I never got to my goal, so any help would be greatly appreciated!

tl;dr : User input image in text box > click submit button > if image is over size i definite > alert & end process

Thank you!

Alex Cane
  • 157
  • 1
  • 2
  • 9

3 Answers3

2

Just create a new Image object with that url and check its width and height attributes after the onload event.

var img = new Image();
img.onload = function(){
   alert(img.width);
};
img.src = "http://example.com/avatar.png";

​

There is no need for server-side with this, but you should note that users are able to override this since it's done solely on the browser.

esamatti
  • 18,293
  • 11
  • 75
  • 82
  • 1
    If it's important to limit image sizes and avoid having people prank the site, then there definitely is a need to check this server-side. – Pointy Oct 11 '10 at 17:27
  • this is indeed a working solution, but hope everybody will do this task on server (with js disabled users must not be allowed to upload forbidden images) –  Oct 11 '10 at 17:42
0

I think this is something you should do with your server-side code. Have the page submit the form, the server can fetch it and check the size, and then the server should return an error if the image is too big.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • I'm already using Ajax to submit my forum, I tried thinking a way with PHP, but the PHP getimagesize() is for images being uploaded. I only want my users avatar to link to an external image for now, maybe later I will add the ability to upload your own image. Although if you can supply a PHP code that could check a remote file size, I would be happy to use it, I just thought javascript could come in more handy – Alex Cane Oct 11 '10 at 17:19
0

this kind of control has to be done on server-side. Javascript should not be used to get image size before form submitting.

If image is too big just discard the image and returns an error message to the user

  • Then what PHP function could I use to check a remote file size? – Alex Cane Oct 11 '10 at 17:22
  • I don't know PHP, but a fairly good bet is to fetch the remote image, but it into a temporary file on the server, and use a function that gets the size of a local image. – Cameron Oct 11 '10 at 17:25
  • Fabrizio, thank you, I just read more in depth after asking the question and now I'm sure it,s possible, I'll try it out. Thanks for all the answers! – Alex Cane Oct 11 '10 at 17:30