Validate image Resolution in Javascript, PHP - Stack Overflow

admin管理员组

文章数量:1334424

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

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

• php
• javascript
• validation
• resolution
• image-size

Share Follow asked May 4, 2012 at 8:18 Suresh kumarSuresh kumar 2,10211 gold badge1919 silver badges2828 bronze badges 3

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 puter.

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?

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 pleted. 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 ponent. For instance, SWFUploader. JavaScript can never access a file on the user's puter, 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.

本文标签： Validate image Resolution in JavascriptPHPStack Overflow