Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
JavaScript WebAPI File File.type Property
The JavaScript File WebAPI file.type property indicated the media type of the file.
Following is the code for the File WebApi File.type property −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript file.type property</h1>
<div class="result"></div>
<input type="file" class="fileInput" />
<h3>Upload a file using the above input type to get its file type</h3>
<script>
let resultEle = document.querySelector(".result");
document
.querySelector(".fileInput")
.addEventListener("change", (event) => {
resultEle.innerHTML +=
"File name = " + event.target.files[0].name + "<br>";
resultEle.innerHTML += "File type = " + event.target.files[0].type;
});
</script>
</body>
</html>
Output
On clicking the “Choose file” button −
Updated on: 2020-05-06T11:58:12+05:30
136 Views
Advertisements