How to get the HTML s input element of file type to only accept pdf files

Question

is there any way that html element file   lt input name  file1  type  file  style  width 300px  gt    only accept PDF files and when we browse its only show PDF files     Thanks

User · Answer

The previous posters made a little mistake. The accept attribute is only a display filter. It will not validate your entry before submitting.

This attribute forces the file dialog to display the required mime type only. But the user can override that filter. He can choose . and see all the files in the current directory. By doing so, he can select any file with any extension, and submit the form.

So, to answer to the original poster, NO. You cannot restrict the input file to one particular extension by using HTML.

But you can use javascript to test the filename that has been chosen, just before submitting. Just insert an onclick attribute on your submit button and call the code that will test the input file value. If the extension is forbidden, you'll have to return false to invalidate the form. You may even use a jQuery custom validator and so on, to validate the form.

Finally, you'll have to test the extension on the server side too. Same problem about the maximum allowed file size.

User · Answer

To get the HTML file input form element to only accept PDFs  you can use the accept attribute in modern browsers such as Firefox 9   Chrome 16   Opera 11  and IE10  like such    lt input name  file1  type  file  accept  application pdf  gt    You can string together multiple mime types with a comma    The following string will accept JPG  PNG  GIF  PDF  and EPS files    lt input name  foo  type  file  accept  image jpeg image gif image png application pdf image x-eps  gt    In older browsers the native OS file dialog cannot be restricted     you d have to use Flash or a Java applet or something like that to handle the file transfer   And of course it goes without saying that this doesn t do anything to verify the validity of the file type  You ll do that on the server-side once the file has uploaded   A little update     with javascript and the FileReader API you could do more validation client-side before uploading huge files to your server and checking them again

User · Answer

No   But you can check out SWFUpload and Ajax Upload

User · Answer

No way to do that other than validate file extension with JavaScript when input path is populated by the file picker  To implement anything fancier you need to write your own component for whichever browser you want  activeX or XUL   There s an  accept  attribute in HTML4 01 but I m not aware of any browser supporting it - e g  accept  image gif image jpeg - so it s a neat but impractical spec

User · Answer

Not really  See File input   39 accept  39  attribute - is it useful

User · Answer

Not with the HTML file control  no  A flash file uploader can do that for you though  You could use some client-side code to check for the PDF extension after they select  but you cannot directly control what they can select

User · Answer

It can be useful to prevent the distracted user to make an involuntary bad choice  but in any case  you have to do the check on the server side anyway  The best way is to be clear in the upload page  After that  if the user stupidly upload a big file with the wrong type  that s their loss of time  no

[html] How to get the HTML's input element of "file" type to only accept pdf files?

Examples related to html

Examples related to validation

Examples related to file

Examples related to input