Syntax error JavaScript WebAPI File File.size Property

JavaScript WebAPI File File.size Property



The JavaScript File WebAPI file.size property returns the size of file in bytes.

Following is the code for the File WebApi File.size property −

Example

 Live Demo

<!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.size property</h1>
<div class="result"></div>
<input type="file" class="fileInput" />
<h3>
Upload a file using the above input type to get its file size
</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 size = " + event.target.files[0].size + ' bytes ';
});
</script>
</body>
</html>

Output

On clicking the ‘Choose file’ button and selecting a file −

Updated on: 2020-05-06T11:55:32+05:30

103 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements