Jquery file size validation does not work

Question

I got this jquery file type validation on the internet. It works great. I later added some code into it to validate file's size as well. But it did not raise alert box when my file size is greater than 50KB. I just learn jquery so I am not sure what i added is correct or not. Please help.

Here is JSFIDDLE

Here is the code:

<script>
$(document).ready(function () {
$('input[type=file]').change(function () {
var val = $(this).val().toLowerCase();
var regex = new RegExp("(.*?)\.(jpg|jpeg|gif)$");
if(!(regex.test(val))) {
$(this).val('');
alert('Unsupported file');
} 
if ($(this).files.size > 50000 || $(this).files.fileSize > 50000)
    {
        //reset file upload control
       $(this).val('');
       //show an alert to the user
       alert('Allowed file size exceeded 50KB');


    }
}); });
</script>

This is what i have added into the existing code:

if ($(this).files.size > 50000 || $(this).files.fileSize > 50000)
    {
        //reset file upload control
       $(this).val('');
       //show an alert to the user
       alert('Allowed file size exceeded 50KB');


    }

Community · Accepted Answer · 2017-05-23 12:00:40Z

2

Working fiddle HERE

Code

$(document).ready(function () {
$('input[type=file]').change(function () {
var val = $(this).val().toLowerCase();
var regex = new RegExp("(.*?)\.(jpg|jpeg|gif)$");
if(!(regex.test(val))) {
$(this).val('');
alert('Unsupported file');
} 
if (this.files[0].size > 50000 || this.files[0].size > 50000)
    {
        //reset file upload control
       $(this).val('');
       //show an alert to the user
       alert('Allowed file size exceeded 50KB');


    }
}); });

Fore more refer Here . It usesthis.files[0].size means get file size for 1st selectd file(If multiselect is enabled , checks for 1st image) ,anyway you are not having multiselect so you access it using 0th index of files selected because you can select only 1 file in regular operation.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Feb 10, 2015 at 7:35

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giang Nguyen Over a year ago

What if I have 6 <input type='file'> in my form?

Pratik Joshi Over a year ago

@GiangNguyen , no issue with multiple files .Check here => jsfiddle.net/5h29Lxv7/2 .It just makes sure for each <input type="file> It checks for 1st selected file in case of multiselect.

kpearlkmanic · Accepted Answer · 2015-02-10 07:45:36Z

-1

$(document).ready(function () {
$('input[type=file]').change(function () {
var val = $(this).val().toLowerCase();
var regex = new RegExp("(.*?)\.(jpg|jpeg|gif)$");
if(!(regex.test(val))) {
$(this).val('');
alert('Unsupported file');
} 
if (this.files[0].size > 50000)
    {
        //reset file upload control
       $(this).val('');
       //show an alert to the user
       alert('Allowed file size exceeded 50KB');


    }
}); });

<input type="file"/>

answered Feb 10, 2015 at 7:45

kpearlkmanic

848 bronze badges

2 Comments

Pratik Joshi Over a year ago

I dont think its anyway different than answer i posted .

kpearlkmanic Over a year ago

There is no need of this.files[0].size > 50000 condition twice i think

Collectives™ on Stack Overflow

Jquery file size validation does not work

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related