Here is the most important article for us to check the file info before sending file to the server. So, in this tutorial, I will show you how to get file info before uploading in JavaScript.
If you tries to upload file that exceed the size limit, then the app must display a message, telling the user not to exceed the limit. Likewise, you can do many useful things with the size of the files, such as, convert the bytes to Kilobytes etc.
The File type
name – the filename
size – the size of the file in bytes
type – the MIME type for the file
File Name Using JavaScript:
document.getElementById('fileName').files[0].name;
File Size Using JavaScript:
document.getElementById('fileName').files[0].size;
File Type Using JavaScript:
document.getElementById('fileName').files[0].type;
Full Code:
<html>
<head>
<title>Get the data of uploaded file in javascript</title>
</head>
<body>
<input type="file" id="fileName" onchange="getInfo()"/>
<p id="fileinfo"></p>
<script>
function getInfo(){
var Size = document.getElementById('fileName').files[0].size;
var Name = document.getElementById('fileName').files[0].name;
var Type = document.getElementById('fileName').files[0].type;
var fileinfo = 'File Name: '+Name+"<br/> File Size: "+Size+"<br/> File Type: "+Type;
document.getElementById('fileinfo').innerHTML = fileinfo;
}
</script>
</body>
</html>