Javascript File Size Validation Example

Dharmik Tank May 06, 2021
Javascript File Size Validation Example

Hi Dev,

Today, i will learn 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.

I 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>Javascript File Size Validation  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....

Tags