In this article I will explain with an example, how to get MIME Type (Content Type) of a File in JavaScript.
HTML Markup
The following HTML Markup consists of an HTML FileUpload element. The FileUpload element has been assigned with an OnChange JavaScript event handler.
<input type="file" id="fuUpload" onchange="GetMIME()" />
JavaScript to get MIME Type (Content Type) of a File
The following JavaScript function gets called when a File is selected in the HTML FileUpload element.
Inside the JavaScript function, first the HTML FileUpload element is referenced. Then the selected File is accessed from the HTML5 files collection.
Finally, 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">
function GetMIME() {
var fuUpload = document.getElementById("fuUpload");
alert(fuUpload.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