How to filter input type="file" dialog by specific file type?
JavascriptHtmlJavascript Problem Overview
I want to restrict the browser to JPG files when I click on browse button of the <input type="file">.
Is it possible to browse for specific file types?
Javascript Solutions
Solution 1 - Javascript
This will give the correct (custom) filter when the file dialog is showing:
<input type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*">
Solution 2 - Javascript
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 Usage
>
> The accept attribute specifies the types of files that the server
> accepts (that can be submitted through a file upload).
>
> Note: The accept attribute can only be used with <input type="file">.
>
> Tip: Do not use this attribute as a validation tool. File uploads
> should be validated on the server.
>
> Syntax <input accept="audio/*|video/*|image/*|MIME_type" />
>
> Tip: To specify more than one value, separate the values with a comma
> (e.g. <input accept="audio/*,video/*,image/*" />.
Solution 3 - Javascript
Add a custom attribute to <input type="file" file-accept="jpg gif jpeg png bmp"> and read the filenames within javascript that matches the extension provided by the attribute file-accept. This will be kind of bogus, as a text file with any of the above extension will erroneously deteted as image.
Solution 4 - Javascript
<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;
}
});
Solution 5 - Javascript
You can use the accept attribute along with the . It doesn't work in IE and Safari.
Depending on your project scale and extensibility, you could use Struts. Struts offers two ways to limit the uploaded file type, declaratively and programmatically.
For more information: http://struts.apache.org/2.0.14/docs/file-upload.html#FileUpload-FileTypes