How to get the name, size, and type of a file in JavaScript
Using JavaScript we can create a function which displays the name, size and type of the downloaded file along with the last modified date. In the below Html code, We have created an input field which has the type as file and on change of this input field we are calling a function named “getFileInfo()” .
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="file" id="myFile" onchange="getFileInfo()" />
<script>
function getFileInfo() {
var name = document.getElementById("myFile").files[0].name;
var size = document.getElementById("myFile").files[0].size;
var type = document.getElementById("myFile").files[0].type;
var date = document.getElementById("myFile").files[0].lastModifiedDate;
var info = name + " " + size + " " + type + " " + date;
alert(info);
}
</script>
</body>
</html>
The function getFileInfo() we have declared name, size , type and last modified date. While declaring the variables we are using the document.getElementbyId method of html to access the particular files id from the input field and applying .files method , to get the particular details of that file. In the name variable we have used .files[0].name to display the name of the file.Similarly we used .size and .type method to display the respective file size and its type.
In declaration of date if we utilized the .lastModifiedDate property to display the last modified date in the pop up.
Note that all the file details will be displayed in an alert pop up as we have declared a variable info which contactinates all the file details such as ( name , size type and date) with some space in between using the empty strings “ “ . And the variable info which hold the details is being called when the alert pop up opens after the file is selected.
Here you can find the output for the above code.
