File Size Validation Using Javascript Example

JavaScript

When “File Size Validation Using Javascript Example” moves through design, development and browser testing, the official walkthrough can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with MDN Web Docs before adopting it in production.

May 27, 2020

Hi Guys,

In this article, i will exmplain how to check file size validation using Javascript. we will check file size validation using Javascript. I can check file size validation using Javascript.Now, we get the file size on the image change event and after we will check the file size, if file size greater than 2mb then it will return the error messages otherwise return the success message.ill explain to you how to check file (Image) size validation before upload the file using Javascript.

solution

function OnFileValidation() {
    var image = document.getElementById("image");
    if (typeof (image.files) != "undefined") {
        var size = parseFloat(image.files[0].size / (1024 * 1024)).toFixed(2); 
        if(size > 2) {
            alert('Please select image size less than 2 MB');
        }else{
            alert('success');
        }
    } else {
        alert("This browser does not support HTML5.");
    }
}

So you can see here our example.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>File Size Validation Using Javascript Example</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css">
</head>
<body class="bg-dark">
    <div class="continer">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <div class="card">
                    <div class="card-header">
                        <h5>File Size Validation Using Javascript Example</h5>
                    </div>
                    <div class="card-body">
                        <form method="post" name="frmAdd" id="frmAdd">
                            <label for="image">Image:</label>
                            <input type="file" name="image" class="form-control" id="image" value="" onchange="OnFileValidation()"><br/>
                            <button type="submit" class="btn btn-success">Submit</button>        
                       </form>
                    </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="Javascript">
    function OnFileValidation() {
        var image = document.getElementById("image");
        if (typeof (image.files) != "undefined") {
            var size = parseFloat(image.files[0].size / (1024 * 1024)).toFixed(2); 
            if(size > 2) {
                alert('Please select image size less than 2 MB');
            }else{
                alert('success');
            }
        } else {
            alert("This browser does not support HTML5.");
        }
    }
</script>
</html>

It will help you....