CODEWITHSUNDEEP
phpupload
Mohamed Said
Mohamed Said

Reputation: 4623

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 ?

Upvotes: 0

Views: 783

Answers (2)

Oswald
Oswald

Reputation: 31685

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>

Upvotes: 1

Nightwolf
Nightwolf

Reputation: 951

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.

Upvotes: 0

Related Questions