How to filter the input type = "file" dialog by a specific file type?

Question

I want to limit the browser to jpg files when I click the browse button <input type="file"> .

Can I view certain types of files?

Answer 1

See http://www.w3schools.com/tags/att_input_accept.asp :

The accept attribute is supported in all major browsers except Internet Explorer and Safari. Definition and use

The accept attribute indicates the types of files that the server accepts (which can be sent via file download).

Note. The accept attribute can only be used with <input type="file"> .

Tip. Do not use this attribute as a validation tool. File upload should be checked on the server.

Syntax <input accept="audio/*|video/*|image/*|MIME_type" />

Tip. To specify more than one value, separate the values ​​with a comma (for example, <input accept="audio/*,video/*,image/*" /> .

Answer 2

This will give the correct (custom) filter when the file dialog box is displayed:

 <input type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|images/*"> 

Answer 3

You can use the accept attribute with. It does not work in IE and Safari.

Depending on the size of your project and extensibility, you can use Struts. Struts offers two ways to restrict the type of download file declaratively and programmatically.

For more information: http://struts.apache.org/2.0.14/docs/file-upload.html#FileUpload-FileTypes

Answer 4

Add a custom attribute to <input type="file" file-accept="jpg gif jpeg png bmp"> and read the file names in javascript that match the extension provided by the file-accept attribute. This will be a kind of fake, since a text file with any of the above extensions will be erroneously limited in image quality.

Answer 5

 <asp:FileUpload ID="FileUploadExcel" ClientIDMode="Static" runat="server" /> <asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" Text="Upload Excel File" /> 

.

 $('#btnUpload').click(function () { var uploadpath = $('#FileUploadExcel').val(); var fileExtension = uploadpath.substring(uploadpath.lastIndexOf(".") + 1, uploadpath.length); if ($('#FileUploadExcel').val().length == 0) { // write error message return false; } if (fileExtension == "xls" || fileExtension == "xlsx") { //write code for success } else { //error code - select only excel files return false; } });