Validating input type=file

Question

How do I validate if the user has selected an image or not on click of the upload button using jQuery. can i put restriction on the resolution of the image being uploaded?? eg:- only images above resolution 900 x 400 are allowed. Below is my form which i'm using

<form id='eventImage' action='upload_temp_image.php' method='POST' enctype='multipart/form-data'>
<input type='text' class='form-control' name='image_name' id='image_name'/>
<input type='file' name='event_image' id='event_image' />
<input type='submit' name='upload' value='Upload' />
</form>

Below is the jQuery:

$("#eventImage").validate({
        rules: {
            image_name: {
                required : true
            },
            // validate the input type=file 
        },

        image_name: {
            new_name: "Please enter a Category name!",
            event_image: "Please select an image"
        }
  });

possible duplicate of JQuery Validate input file type

Aditya Singh
– Aditya Singh

2014-08-01 05:03:05 +00:00
Commented Aug 1, 2014 at 5:03 — Aditya Singh
– Aditya Singh, Commented Aug 1, 2014 at 5:03

AlexJaa · Accepted Answer · 2014-08-01 05:41:20Z

1

Have a look at the extension rule

$("#eventImage").validate({
    rules: {
        image_name: {
            required: true
        },
        event_image: {
            required: true,
            extension: "png|jpg"
        }
    },
    messages: {
        event_image: {
            extension: "Please select an image"
        }
    }
});

Demo: Fiddle

Or if you want to go with mimetype, then look at accept rule

$("#eventImage").validate({
    rules: {
        image_name: {
            required: true
        },
        event_image: {
            required: true,
            accept: "image/*"
        }
    },
    messages: {
        event_image: {
            accept: "Please select an image"
        }
    }
});

Demo: Fiddle

edited Aug 1, 2014 at 5:41

AlexJaa

3897 silver badges20 bronze badges

answered Aug 1, 2014 at 5:11

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Ravi Makwana · Accepted Answer · 2020-10-15 10:31:03Z

0

hey I don't know if people still have this problem but if you want the user to upload only images and nothing else just add accept="image/*" after <input type="file" and it works.

No need to add jquery for that.

edited Oct 15, 2020 at 10:31

Ravi Makwana

2,9201 gold badge32 silver badges42 bronze badges

answered Oct 15, 2020 at 8:24

Raja Jee

517 bronze badges

Collectives™ on Stack Overflow

Validating input type=file

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related