In this article I will explain with an example, how to check (validate) File (Image) size before upload using JavaScript and jQuery.
HTML5 allows to access the file contents and details i.e. size of the File using JavaScript and jQuery.
Validating the File Size before upload using JavaScript
The following HTML Markup consists of an HTML FileUpload, a SPAN and a Button control.
The Button has been assigned a JavaScript OnClick event handler.
When the Upload button is clicked Validate JavaScript function is called.
Inside the Validate JavaScript function, a check is performed whether the size of the file is less than allowed size, if not then, the error message will be displayed in SPAN element.
<input type="file" id="fuUpload" />
<span id="lblMessage" style="color: red;"></span>
<br/>
<input type="button" value="Upload" onclick="return Validate()" />
<scripttype="text/javascript">
function Validate() {
var file = document.getElementById("fuUpload");
var msg = document.getElementById("lblMessage");
msg.innerHTML = "";
var size = parseFloat(file.files[0].size);
var maxSizeKB = 20; //Size in KB.
var maxSize = maxSizeKB * 1024; //File size is returned in Bytes.
if (size > maxSize) {
msg.innerText = "Max file size " + maxSizeKB + "KB allowed.";
file.value = "";
return false;
}
}
</script>
Validating the File Size before upload using jQuery
The following HTML Markup consists of an HTML FileUpload, a SPAN and a Button control.
The Button has been assigned a jQuery click event handler.
When the Upload button is clicked, a check is performed whether the size of the file is less than allowed size, if not then, the error message will be displayed in SPAN element.
<input type="file" id="fuUpload" />
<span id="lblMessage" style="color: red;"></span>
<br/>
<input type="button" id="btnUupload" value="Upload" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnUupload").bind("click", function () {
$("#lblMessage").html("");
var file = $("#fuUpload");
var size = parseFloat(file[0].files[0].size);
var maxSizeKB = 20; //Size in KB.
var maxSize = maxSizeKB * 1024; //File size is returned in Bytes.
if (size > maxSize) {
$("#lblMessage").html("Maximum file size " + maxSizeKB + "KB allowed.");
file.val("");
return false;
}
});
});
</script>
Screenshot
![Check (Validate) File (Image) Size before upload using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
