Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question

3 Answers

up vote 0 down vote

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>
share|improve this answer
Works nice, thank you. I just need a little bit help with my logic on the 5th line. if (totalSize > 7340032) { 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.'); } it doesn't seem to work, I'm using wrong syntax I think :/ – TeeJay 34 mins ago
up vote 0 down vote

Try this, make totalSize global variable

 var totalSize = 0;    
 function changeSize() {
   totalSize  = totalSize + this.files[0].size;
   alert(totalSize); 
 }

 var myFile1 = document.getElementById('myFile1'); 
 myFile1.addEventListener('change', changeSize);
share|improve this answer
Thank you, you are right just as SanjeevRai is. You just forgot about the cycle, but I can add it there myself with examples over the internet :) – TeeJay 48 mins ago
up vote 0 down vote

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

share|improve this answer
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. – TeeJay 30 mins 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 – BeNdErR 25 mins 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 21 mins 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 :/ – TeeJay 7 mins 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 – BeNdErR 3 mins ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.