Is it possible to use jQuery to calculate/validate/restrict total upload size of dynamically added file fields? The form will be sending the content as an email copy, so it should be limiting the total upload size to eg. 20MB or so. The backend validation is no problem (by PHP).

The validation could either be done 'on the fly' or when hitting submit.

Consider the following code:

<div class="input_fields_wrap">
  <a href="#" class="add_field_button">+ Add</a>
  <div>
    <input type="file" name="attachment[]">
  </div>
</div>

And the jQuery:

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".input_fields_wrap");
  var add_button = $(".add_field_button");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div><input type="file" name="attachment[]"/><a href="#" class="remove_field">Remove</a></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

Fiddle: /

Any input on how to solve this would be much appreciated.

Update: New Fiddle with implemented solution: /

Is it possible to use jQuery to calculate/validate/restrict total upload size of dynamically added file fields? The form will be sending the content as an email copy, so it should be limiting the total upload size to eg. 20MB or so. The backend validation is no problem (by PHP).

The validation could either be done 'on the fly' or when hitting submit.

Consider the following code:

<div class="input_fields_wrap">
  <a href="#" class="add_field_button">+ Add</a>
  <div>
    <input type="file" name="attachment[]">
  </div>
</div>

And the jQuery:

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".input_fields_wrap");
  var add_button = $(".add_field_button");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div><input type="file" name="attachment[]"/><a href="#" class="remove_field">Remove</a></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

Fiddle: https://jsfiddle/yyqnwfb9/1/

Any input on how to solve this would be much appreciated.

Update: New Fiddle with implemented solution: https://jsfiddle/yyqnwfb9/2/

• javascript
• jquery
• html
• forms
• validation

Share Improve this question Follow edited Jan 22, 2018 at 11:12 TNF asked Jan 21, 2018 at 15:33 TNFTNF 20966 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can use the HTML5 File API to get the size. For example, to get total size in bytes of all files in the page:

function getTotal() {
  var total = 0;

  $(':file').each(function() {    
    if (this.files && this.files[0]) {
      total += this.files[0].size;
    }
  });

  return total;
}

$(function() {
  var maxSize = 3 * 1000 * 1000 ; // ~3MB
  $(document).on('change', ':file', function() {    
    if (getTotal() > maxSize) {
      // Clear field
      $(this).val('');
      // Display error?
      $('#total').append(' Too big');
    } else {
      // Update total
      $('#total').text(getTotal());
    }
  });
});

input {
  display: block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="file" name="attachment[]">
<input type="file" name="attachment[]">
<input type="file" name="attachment[]">
<input type="file" name="attachment[]">
<input type="file" name="attachment[]">

<strong>Total Bytes: <span id="total">0</span></strong>

i have set file size limit of 3MB in upload function

$(document).ready(function() {
 
  var max_fields = 10;
  var wrapper = $(".input_fields_wrap");
  var add_button = $(".add_field_button");

  var x = 1;
  var uploadField = document.getElementById("file");

  uploadField.onchange = function() {
      if(this.files[0].size > 307200){
         alert("File is too big!");
         this.value = "";
      }
      else{
              $(add_button).click(function(e) {
          e.preventDefault();
          if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="file" name="attachment[]"/><a href="#" class="remove_field">Remove</a></div>');
          }
        });

        $(wrapper).on("click", ".remove_field", function(e) {
          e.preventDefault();
          $(this).parent('div').remove();
          x--;
        })
            }

        };
  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
  <a href="#" class="add_field_button">+ Add</a>
  <div>
    <input type="file" id="file" name="attachment[]">
  </div>
</div>