Upload file size

Native Javascript approach:

<!DOCTYPE html> 
<html> 
<head> 
    <title>File Validation-1</title> 
</head> 
<body> 
    <p> 
        <input type="file" id="file" onchange="Filevalidation()" /> 
    </p> 
    <p id="size"></p> 
</body> 

<script> 
Filevalidation = () => { 
    const fi = document.getElementById('file'); 
    // Check if any file is selected. 
    if (fi.files.length > 0) { 
        for (const i = 0; i <= fi.files.length - 1; i++) { 
            const fsize = fi.files.item(i).size; 
            const file = Math.round((fsize / 1024)); 
            // The size of the file. 
            if (file >= 4096) { 
                alert("File too Big, please select a file less than 4mb"); 
            } else if (file < 2048) { 
                alert("File too small, please select a file greater than 2mb"); 
            } else { 
                document.getElementById('size').innerHTML = '<b>' + file + '</b> KB'; 
            } 
        } 
    } 
} 
</script> 

</html>

jQuery approach:

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>JQuery File Validation</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
</script> 
</head> 
<body> 
    <input id="file" type="file" name="file" />
    <p id="output"></p> 

    <script type="text/javascript"> 
        $('#file').on('change', function() { 
            const size = (this.files[0].size / 1024 / 1024).toFixed(2); 
            if (size > 4 || size < 2) { 
                alert("File must be between the size of 2-4 MB"); 
            } else { 
                $("#output").html('<b>' + 'This file size is: ' + size + " MB" + '</b>'); 
            } 
        }); 
    </script> 
</body> 
</html>

Source:
https://www.geeksforgeeks.org/validation-of-file-size-while-uploading-using-javascript-jquery/