Validate the uploaded file size with jQuery form validation remote method

Question

Hello all,

I would like to do a filesize validation as follows. Please see whether this proposal method makes sense or not. This part alone should work.

1> After the user selects a file, I check whether the file has suffix as png, gif etc.
$("#myform").validate({
 rules: {
   fieldForUpload: {
     required: true,
     accept: "png|gif"
   }
 }
});

2> Then I would like to use aJax method to upload the file to server for validation even before the user clicks the submit button. http://docs.jquery.com/Plugins/Validation/Methods/remote#url

$("#myform").validate({
  rules: {
    fieldForUpload: {
      required: true,
      accept: "png|gif"
      remote: "check-filesize.php"
    }
  }
});

Here is my questions:

1> Is this method valid? In other words, can I validate the fieldUpload with "accept" + "remote" together?

2> Can I enforce to validate the "accept" first, then validate the "remote"?

3> How to implement this "remote" method? FYI: I knew how to validate whether an email exists on the DB by using remote. Do I have to gain some different knowledge in order to achieve this?

Many thanks

Answer 1

Have you considered using a file upload widget? Normal form validation requires access to the form fields. It's not possible in most browsers to actually manipulate file upload input fields.

Check out Plupload and SWFUpload, two Flash-based file upload widgets that permit type and file size restrictions without sending the file to the server first.

There's also Ajax Upload and Uploadify, two jQuery plugins that try to use modern browser features to do the same thing. Older browsers might not have the same level of support.