Accept Specific File Type in HTML5 File Upload

by Sasikumar 2014-06-23 18:19:54

To accept only specific file type in HTML5 file upload use the following technique,
To Accept CSV files (.csv) only, use:
<input type="file" accept=".csv" />
To Accept Excel Files 2003-2007 (.xls) only, use:
<input type="file" accept="application/" />
To Accept Excel Files 2010 (.xlsx) only, use:
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
To Accept Text Files (.txt) only, use:
<input type="file" accept="text/plain" />
To Accept Image Files (.png/.jpg/etc) only, use:
<input type="file" accept="image/*" />
To Accept HTML Files (.htm,.html) only, use:
<input type="file" accept="text/html" />
To Accept Video Files (.avi, .mpg, .mpeg, .mp4) only, use:
<input type="file" accept="video/*" />
To Accept Audio Files (.mp3, .wav, etc) only, use:
<input type="file" accept="audio/*" />
To Accept PDF Files only, use:
<input type="file" accept=".pdf" /> 

To Accept Multiple File Types, use:
Mention the "accept" parameter with comma seperated values,
<input id="myFile" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/" />  

To Accept Only Single File Type, use:
<input type="file" accept=".FILETYPE" />
Hope this would help you in restricting the uploads of other file type and writing some extra javascript for validation code for this purpose.

You must LOGIN to add comments