How to validate uploaded file with jquery plugin?

Question

I am using this script in wordpress.

Here is my code:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://raw.github.com/jzaefferer/jquery-validation/master/jquery.validate.js"></script> <script src="https://raw.github.com/jzaefferer/jquery-validation/master/additional-methods.js"></script> <script> jQuery(document).ready(function($){ $("#subsciptionForm").validate({ rules: { headshot: { required: true, accept: "jpg,png,jpeg,gif" }, actorcv: { required: true, accept: "application/msword, application/pdf" } }, messages: { headshot: { required: 'Select an image to upload', accept: 'Only images with type jpg/png/jpeg/gif are allowed' }, actorcv: { required: "Select a CV", accept: 'Only doc/docx/pdf files are allowed' } }, submitHandler: function(form) { //form.submit(); var url = '<?php echo SET_SUBSCRIBER; ?>'; var datastring = $("form").serialize(); alert(datastring); return false; $.ajax({ type: "POST", url: url, data: datastring, success: function(data) { //alert(data); return false; form.submit(); } }); return false; } }); }); </script>

Here is the form field

 <!-- Upload Headshot --> <tr> <td class="title_cell" width="23%"> Upload Headshot :<span class="required">*</span> </td> <td class="field_cell"> <input type="file" class="required" name="headshot" size="25"> (jpg, gif or png only, with maximum 1MB size) </td> </tr> <!-- Upload Actor's CV --> <tr> <td class="title_cell" width="23%"> Upload Actor's CV :<span class="required">*</span> </td> <td class="field_cell"> <input type="file" class="required" name="actorcv" size="25"> (MS-word or PDF only, with maximum 1MB size) </td> </tr>

It works well with for image file validation but does not validate pdf and doc file. Keep on giving the same message i have defined in message "Only doc/docx/pdf files are allowed". Also i get this in console :

TypeError: b.browser is undefined

Edited :

The TypeError is gone after Kevin B help in comment but it is still not validating pdf file. Any idea ?

b.browser is undefined is from using a plugin that hasn't been updated for jquery 1.9 — user400654
– user400654, Commented Apr 12, 2013 at 17:36
jquery link is incorrect, it should be <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -------- http: missing — Adil Shaikh
– Adil Shaikh, Commented Apr 12, 2013 at 17:36
@MohammadAdil There's nothing wrong with leaving http: off. — user400654
– user400654, Commented Apr 12, 2013 at 17:36
@Kevin B So you suggest i should use down version of jquery? — atif
– atif, Commented Apr 12, 2013 at 17:39

Sparky · Accepted Answer · 2013-04-17 04:20:39Z

2

The accept rule is for validating by mime-type.

If you're trying to validate by file extension, you'd want to use the extension rule.

See: http://docs.jquery.com/Plugins/Validation/CustomMethods/extension#extension

rules: { headshot: { required: true, extension: "jpg,png,jpeg,gif" }, actorcv: { required: true, accept: "application/msword, application/pdf" } },

answered Apr 17, 2013 at 4:20

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

atif Over a year ago

images are validating nicely but word document and pdf file are not validated. I think you should change the "accept" for actorcv. What say?

Sparky Over a year ago

@atif, how to assemble your project is really up to you. I'm simply explaining the difference between the accept and extension rules.

Sparky Over a year ago

@atif, yes why not try both of your fields with extension rules.

Collectives™ on Stack Overflow

How to validate uploaded file with jquery plugin?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related