javascript - jQuery:在表单中动态添加文件上传字段并验证总大小

Question

是否可以使用 jQuery 来计算/验证/限制动态添加的文件字段的总上传大小？该表格将以电子邮件副本的形式发送内容，因此它应该将总上传大小限制为例如。 20MB左右。后端验证没问题(通过PHP)。

验证可以“即时”完成，也可以在点击提交时完成。

考虑以下代码:

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

还有 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.net/yyqnwfb9/1/

任何有关如何解决此问题的意见都将不胜感激。

更新:带有实现解决方案的新 Fiddle:https://jsfiddle.net/yyqnwfb9/2/

Answer 1

您可以使用 HTML5 File API得到尺寸。例如，获取页面中所有文件的总大小(以字节为单位):

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.com/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>