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

Answer 1

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.