Simple Javascript loop for checking total size of multiple file

Question

How can I implement this code into a loop for 20 files? They will have id="myFile1", "myFile2" etc.

<script type="text/javascript">
var myFile = document.getElementById('myFile'); 
myFile.addEventListener('change', function() {
  alert(this.files[0].size);   
});
</script>

My first idea was to do 20 scripts, but I don' really think that it would be good solution, I really prefer clean code.

I tried this... but doesn't work for some reason - the second file reports "NaN" instead of file size in bytes.

<script type="text/javascript">

var myFile = document.getElementById('myFile'); 
myFile.addEventListener('change', function() {
  var totalSize = this.files[0].size;
  alert(totalSize); 
});

</script>

<script type="text/javascript">

var myFile1 = document.getElementById('myFile1'); 

myFile1.addEventListener('change', function() {
  var totalSize = totalSize + this.files[0].size;
  alert(totalSize); 
});

</script>

I would also like to implement an IF conditional that would alert only if the totalSize were bigger than 7 MB, that means that I need the totalSize/(1024*1024) - easy to do, but not the loop .

Could you please help me building a working loop that would count the totalSize of all the files? myFile is an ID of input type="file" element.

Sanjeev Rai · Accepted Answer · 2013-06-05 06:43:01Z

2

Try and use following logic:

<script type="text/javascript">
 var totalSize=0;
 function checkSize() {
  totalSize = totalSize + this.files[0].size;
  alert(totalSize); //write logic to check size validation etc. here
 }
 for(var i=1;i<=20;i++)
 {
  var myFile = document.getElementById('myFile'+i); 
  myFile.addEventListener('change',checkSize);
 }
</script>

answered Jun 5, 2013 at 6:43

Sanjeev Rai

7,0224 gold badges25 silver badges33 bronze badges

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

Comments

BeNdErR · Accepted Answer · 2013-06-05 07:25:41Z

0

I don't know if I understood correctly what you need, but this could be your case: http://jsbin.com/ozadak/2/edit

CODE

 var totArray = [];

 for (var x = 1; x <= 5; x++) {
    var currFile = document.getElementById("myFile"+x);

    currFile.addEventListener('change', function(x){
        totArray[this.id] = parseInt(document.getElementById(this.id).value); //here goes file.size

        var currTot = 0;
        for(var key in totArray){
            currTot += totArray[key];
        }
        if(currTot > 10)
            alert("file sizes > 10 MB");
    });
 }

for simplicity I used some text input, to show how the loop works adding each input the same event. To test it, input an integer representing how many MB does your file weight, it should work.

Hope it helps, regards

edited Jun 5, 2013 at 7:25

answered Jun 5, 2013 at 7:04

BeNdErR

18k21 gold badges79 silver badges106 bronze badges

7 Comments

TeeJay Over a year ago

Thank you. However, this seems to be too complicated for me even if it's not. SanjeevRai's solution is a bit simpler and clearer. Could you help me correcting my syntax my "alert" condition? alert(''You have exceeded maximum file size upload limit. The size of your files is: ' + (totalSize/(1024*1024))+' MB. \n\ Please, delete your last attachment.'); I don't see what's wrong about this.

BeNdErR Over a year ago

which error do you get? anyway, if the user removes a file from one of your inputs, the total size should decrease.. SanjeevRai's solution does not cover this case

TeeJay Over a year ago

Already figured out, it was just doble '' instead of ' in the beginning. My bad. Apart from this, I think I have to try your code, it looks good!

TeeJay Over a year ago

I tried to edit your code but I don't understand it from the line with parse. I suppose I have to write this.fils[0].size somewhere and set the limit somewhere but I don't see the units or something like that :/

BeNdErR Over a year ago

instead of parseInt(...), there you should put the integer val for the file size. The limit is in this statement: "if(currTot > 10)". 10 is the size limit that rises the alert

|

Collectives™ on Stack Overflow

Simple Javascript loop for checking total size of multiple file

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related