File Size Validation on multiple upload with jquery

Question

I have a multiple file upload input. I'm trying to validate the size for each file. It works kind of but depends on which order the files are selected. I hate javascript & I suck at it, please help.

http://jsfiddle.net/2u9kq7fe/1/

$('input[type="file"]').change(function(){
    var imageSizeArr = 0;
    var imageSize = document.getElementById('blah');
    var imageCount = imageSize.files.length;
    for (var i = 0; i < imageSize.files.length; i++)
    {
         var imageSize = imageSize.files[i].size;
         if (imageSize > 5000000) {
             $('#test').text('3');
             var imageSizeArr = 1;
         }
         if (imageSizeArr == 1)
         {
             $('.element').text('files too big');
         }
         else if (imageSizeArr == 0)
         {
             $('.element').text('files not too big');
         }
     }
 });

dfsq · Accepted Answer · 2015-01-15 21:06:54Z

6

You are defining a reference to input field:

var imageSize = document.getElementById('blah');

and later in the for loop you redefine it again, because:

for (var i = 0; i < imageSize.files.length; i++) {
    var imageSize = imageSize.files[i].size;

Remember that there is no block-scope in javascript, so var imageSize in the loop affects previously defined value.

This is your problem. Pick different name for size in the loop and it will work.

answered Jan 15, 2015 at 21:06

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

user1375823 Over a year ago

Thank you for your help DFSQ! =)....And wow thanks to the person who edited the indents on an incorrect and unfinalised piece of code, so very, very helpful...

Kinjal Gohil · Accepted Answer · 2017-05-25 05:12:18Z

0

try like below example;

<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#upload").bind("click", function () {
            if (typeof ($("#fileUpload")[0].files) != "undefined") {
                var size = parseFloat($("#fileUpload")[0].files[0].size / 1024).toFixed(2);
                alert(size + " KB.");
            } else {
                alert("This browser does not support HTML5.");
            }
        });
    });
</script>

answered May 25, 2017 at 5:12

Kinjal Gohil

9689 silver badges15 bronze badges

Comments

Kleajmp · Accepted Answer · 2019-07-14 21:02:26Z

All credits go to @dfsq but as a js beginner it took me some time to figure out the vague description of what he meant with "Pick different name for size" so for all the confused ones here is the working code:

html:

<input type=file name=img[] id=files accept=".jpg, .JPG, .jpeg, .JPEG" multiple=multiple>

js:

$('input#files').change(function(){
  var imageSizeArr = 0;
  var imageArr = document.getElementById('files');
  var imageCount = imageArr.files.length;
  var imageToBig = false;
  for (var i = 0; i < imageArr.files.length; i++){
     var imageSize = imageArr.files[i].size;
     var imageName = imageArr.files[i].name;
     if (imageSize > 5000000){
         var imageSizeArr = 1;
     }
     if (imageSizeArr == 1){
         console.log(imageName+': file too big\n');
         imageToBig = true;
     }
     else if (imageSizeArr == 0){
         console.log(imageName+': file ok\n');
     }
  }
  if(imageToBig){
    //give an alert that at least one image is to big
    window.alert("At least one of your images is too large to process, see the console for exact file details.");
    }
});

Collectives™ on Stack Overflow

File Size Validation on multiple upload with jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related