How to disable submit button until the user uploads an image with correct specifications?

I have this upload code:

<?php
//Сheck that we have开发者_运维技巧 a file
if((!empty($_FILES["uploaded_file"])) && ($_FILES['uploaded_file']['error'] == 0)) {
  //Check if the file is JPEG image and it's size is less than 350Kb
  $filename = basename($_FILES['uploaded_file']['name']);
  $ext = substr($filename, strrpos($filename, '.') + 1);
  if (($ext == "png") && ($_FILES["uploaded_file"]["type"] == "image/png") && 
    ($_FILES["uploaded_file"]["size"] < 150000)) {
    //Determine the path to which we want to save this file
      $newname = dirname(__FILE__).'/upload/'.$filename;
      //Check if the file with the same name is already exists on the server
      if (!file_exists($newname)) {
        //Attempt to move the uploaded file to it's new place
        if ((move_uploaded_file($_FILES['uploaded_file']['tmp_name'],$newname))) {
           echo "It's done! The file has been saved as: ".$newname;
        } else {
           echo "Error: A problem occurred during file upload!";
        }
      } else {
         echo "Error: File ".$_FILES["uploaded_file"]["name"]." already exists";
      }
  } else {
     echo "Error: Only .ppg images under 150Kb are accepted for upload";
  }
} else {
 echo "Error: No file uploaded";
}
?>

And also I'm using the jquery form plugin to submit my forms with ajax.

The question is, how can I disable the submit button unless the user attempts to upload a PNG with maximum size 150 KB ?

---

You need to upload the file separately, because you have no way to check the size of the file that is pointed to by the filename in the upload input field.

But you can check the file extension. On standards-compliant browsers you can do the following to display the name of the file:

<input type="file" id="test">
<script type="text/javascript">
  var input = document.getElementById('test');
  input.addEventListener('change', function() { alert(input.value); }, false);
</script>

---

If you are using html form to have the user upload the image, there should be no way to accomplish this (html tries to protect the user from your script uploading a different file than what the user specified and limits website developers way to modify the upload button).

But there is a jquery plugin that is called uploadify that allows for more customization, which might assist you in the solution.