In this article I will explain with an example, how to get MIME Type (Content Type) of a File in jQuery.
HTML Markup
The following HTML Markup consists of an HTML FileUpload element.
<input type="file" id="fuUpload" />
jQuery code to get MIME Type (Content Type) of a File
Inside the jQuery document.ready event handler, the HTML FileUpload element is assigned with an OnChange event handler.
Inside the OnChange event handler, the selected File is accessed from the HTML5 files collection and the MIME Type (Content Type) of the File is determined from the type property.
Note: The MIME Type (Content Type) of multiple Files can be determined by using a FOR loop.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#fuUpload").change(function () {
alert(this.files[0].type);
});
});
</script>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads