Validate image Resolution in Javascript, PHP

Question

I want to validate Image Resolution before upload an image in PHP through Javascript. In my php form , i want to upload two different images and both image have different resolution restriction.

I try the following code

PHP Code

echo "<form name='add' enctype='multipart/form-data' action='AppActions.php' method='post' onSubmit='return validate_create();'>";
echo "<div class='form_label'>Album Wrapper (Big Image) *</div>";
echo "<div class='form_input'><input type='file' name='bigimage' id='bigimage' />";

echo "<div class='form_label'>Album Wrapper (Small Image) *</div>";
echo "<div class='form_input'><input type='file' name='smallimage' id='smallimage' />;
echo "<input type='submit' name='add' value='Create' class='Buttons' id='add'>";

In Javascript

function validate_create()
{
var bigimage = document.getElementById('bigimage');
var smallimage = document.getElementById('smallimage');

var big_img_width = bigimage.clientWidth;
var big_img_height = bigimage.clientHeight;

var small_img_width = smallimage.clientWidth;
var small_img_height = smallimage.clientHeight;

// if condtion to check the condition //
}

Here i am getting width and height for both images as same even i choose different size files.

How to do this? please suggest me

Thanks in advance

You can check it in PHP but not in javascript before uploading to server — , May 04 '12 at 08:21
Thanks user1331534. Before uploading how can i check it with PHP? can u please help me on this? — Suresh kumar, May 04 '12 at 08:30
You can't do that with PHP *before* the user uploaded the file. — ThiefMaster, May 04 '12 at 08:47

score 5 · Answer 1 · edited May 23 '17 at 12:07

You can use the new HTML5 File API in JavaScript to check this. However, this won't be usable yet in many browsers. You can implement it though, so users of browsers that do support this, they can have advantage of this. Look at this SO post for more information and an example. Another possibility is using some kind of flash uploader (just search for it).

You can't check it beforehand in PHP. PHP runs server side and it, obviously, cannot access anything on the clients computer.

score 2 · Answer 2 · edited May 23 '17 at 12:31

2

Use getimagesize() to validate the file dimensions. If it's not valid, throw and error. Also, you might want to read get uploaded image dimensions with javascript / jquery?

edited May 23 '17 at 12:31

Community

1
1

answered May 04 '12 at 08:43

Boby

798
3
9

score 0 · Accepted Answer · answered May 04 '12 at 08:34

When you execute bigimage.clientWidth or smallimage.clientWidth, you're actually getting the width of the input elements, not the images that you're about to upload. Also, your JavaScript is executed before the files are actually uploaded, and the resolution of the images is not known at this time. In fact, you don't even know if the files are really image files.

The type of an uploaded file, and the image resolution if it is an image, can only be determined after the upload has completed. This will therefore have to be done in PHP (your AppActions.php script). In PHP, you can access file $_FILES global to see which files were uploaded, their type, and their size. You can then open the images and use imagesx and imagesy to determine the dimensions.

If you must know the file type before you permit the upload, then I believe your only way out is to use a flash component. For instance, SWFUploader. JavaScript can never access a file on the user's computer, but Flash can and allows you to determine file type and size before actually uploading the file. Still, your site would then require Flash which may not be what you want.

The type of an uploaded file can be determined before the upload actually happens. — erdomester, Dec 31 '12 at 08:18

Validate image Resolution in Javascript, PHP

3 Answers3