add limit php upload image - php

Question

I use a php ajax script for uploading image in my site and it's don't has limit for upload image.
I want a user can upload only for example 3 image. how can add this limit in my code?
This is my php code for uploading image:
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$vpb_upload_image_directory = "uploads/";
$vpb_allowed_extensions = array("gif", "jpg", "jpeg", "png");
foreach($_FILES as $file)
{
/* Variables Declaration and Assignments */
$vpb_image_filename = basename($file['name']);
$vpb_image_tmp_name = $file['tmp_name'];;
$vpb_file_extensions = pathinfo(strtolower($vpb_image_filename), PATHINFO_EXTENSION);
//New file name
$random_name_generated = time().rand(1234,9876).'.'.$vpb_file_extensions;
if($vpb_image_filename == "")
{
//Browse for a photo that you wish to use
}
else
{
if (in_array($vpb_file_extensions, $vpb_allowed_extensions))
{
if(move_uploaded_file($vpb_image_tmp_name, $vpb_upload_image_directory.$random_name_generated))
{
//Display Uploaded Files
$image .= '
<div class="vpb_wrapper" style="padding:10px;">
<img src="'.$vpb_upload_image_directory.$random_name_generated.'" class="vpb_image_style" />
</div>';
//$image .= '<div class="vpb_wrapper" style="padding:10px; text-decoration:none;">'.$vpb_image_filename.' uploaded</div>';
}
}
else
{
// Do not upload files which are not in the allowed file array
}
}
}
//Display the files
if($image != "") echo $image;
}
?>

Answer 1

In javascript, you can do something like this,
$(document).ready(function(){
$('#photoUploader').click(function(){
$('#photoUI').toggle('slow');
});
var ctr = 1;
$('#add').click(function(){
if(ctr < 3)
{
$('#ulPhoto').append("<li><input type='file' name='file[]' onchange='loadPreview(this,"+ctr+")' id='photo"+ctr+"' /><br /><img id='img"+ctr+"' src='#' alt='' style='width:100px' /><input type='text' autocomplete='off' name='caption[]' id='caption"+ctr+"' placeholder='ID Number' /></li>");
ctr++;
}
else
{
alert('Only 3 Images Allowed at a time');
}
});
});
HTML
<div id="photoUI" style="display:none; height: auto">
<ul id="ulPhoto">
<li>
<input type="file" name="file[]" id="photo0" />
<br />
<img id="img0" src="#" alt="" style="width:100px" />
<input type="text" autocomplete="off" name="caption[]" onchange="loadPreview(this,0)" id="caption0" placeholder="Default ID Number" readonly disabled />
</li>
</ul>
<span id="add" style="cursor:pointer">Add More...</span>
</div>