Validate Image Size before upload using JQuery
In this article, we will learn how to validate image size on button click using JQuery.
Source code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<fieldset style="width: 350px">
<legend>Validate
Image Size before upload using JavaScript</legend>
<input type="file" id="fileuploader" />
<br />
<span id="sapamessage" style="color: red;"></span>
<br />
<br />
<input type="button" value="Upload" id="btnupload" />
</fieldset>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function ()
{
$("#btnupload").bind("click", function ()
{
$("#sapamessage").html("");
var
file = $("#fileuploader");
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) {
$("#sapamessage").html("Maximum
file size " + maxSizeKB + "KB allowed.");
file.val("");
return false;
}
});
});
</script>
</form>
</body>
</html>
Out-Put:-
Reviewed by NEERAJ SRIVASTAVA
on
1:26:00 PM
Rating:
No comments: