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:-



Validate Image Size before upload using JQuery  Validate Image Size before upload using JQuery Reviewed by NEERAJ SRIVASTAVA on 1:26:00 PM Rating: 5

No comments:

Powered by Blogger.