File validation in HTML using Javascript or Jquery

Question

I have on file control that accept only pdf file. and i want to validate file that accept only pdf file as well as if another file is selected than recreate the file control in div tag with same name as well as same id.

validation must be javascript or jquery.

 ...
 <div>
        <input type="file" name="file" id="file1" />
 </div>
 ...

i have try to validate file using javascript but not able to do. — Amit Maru
– Amit Maru, Commented Mar 31, 2015 at 9:42
You can use jqueryvalidate plugin for this. Used it before it's pretty simple. jqueryvalidation.org — LolWalid
– LolWalid, Commented Mar 31, 2015 at 9:45

Aravind Sivam · Accepted Answer · 2015-03-31 09:43:05Z

1

Try this.

<input name="file" type="file" accept="application/pdf" />

answered Mar 31, 2015 at 9:43

Aravind Sivam

1,0998 silver badges23 bronze badges

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

2 Comments

Amit Maru Over a year ago

as per your suggestion...you can change file type when file dialog box is open

Aravind Sivam Over a year ago

I think there is no way to do validation in the client. You can check through extension only.

Manwal · Accepted Answer · 2015-03-31 09:41:39Z

0

Try this:

$("#file1").change(function() {

    var val = $(this).val();

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'pdf':
            alert("Correct type");
            //your code
            break;
        default:
            // error message here
            alert("not a PDF file");
            //yourcode
            break;
    }
});

answered Mar 31, 2015 at 9:41

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

7 Comments

rvandoni Over a year ago

this only check the extension and not the filetype

Manwal Over a year ago

@rikpg checking extension is better solution validation. There is no other way to check file type in Jquery.

rvandoni Over a year ago

the OP can use File API to do some stuff on client side, check this out: html5rocks.com/en/tutorials/file/dndfiles

Amit Maru Over a year ago

your file validation is right..but when i select file except pdf..then file control is not created in div.

Manwal Over a year ago

@AmitMaru if you select file except pdf them not a PDF file alerts. Here you have to code for creating new file control, it will not create automatically.

|

Collectives™ on Stack Overflow

File validation in HTML using Javascript or Jquery

2 Answers 2

2 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related