Join WhatsApp ChannelJoin Now

How To Upload multiple image with size validation in JQuery

Hi Dev,

Today, i we will show you how to upload multiple image with size validation in jQuery. This article will give you simple example of how to upload multiple image with size validation in jQuery. you will learn how to upload multiple image with size validation in jQuery.

So let’s follow few step to create example of how to upload multiple image with size validation in jQuery.

Example:

<html lang="en">
<head>
    <title>How To Upload multiple image with size validation in JQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
</head>
<body>
<div class="container text-center">
    <div class="grid-stack">
        <input type="file" id="fUpload" multiple />
        <button>Save</button>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#fUpload').change(function(){
            var fp = $("#fUpload");
            var lg = fp[0].files.length; // get length
            var items = fp[0].files;
            var fileSize = 0;
           
            if (lg > 0) {
                for (var i = 0; i < lg; i++) {
                    fileSize = fileSize+items[i].size; // get file size
                }
                if(fileSize > 2097152) {
                    alert('File size must not be more than 2 MB');
                    $('#fUpload').val('');
                }
            }
        });
    });
    </script>
</div>	
</body>
</html>

Recommended Posts