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--;
  })
});

小提琴： https: //jsfiddle.net/yyqnwfb9/1/

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

更新：新的小提琴与实施的解决方案： https: //jsfiddle.net/yyqnwfb9/2/

Answer 1

您可以使用 HTML5文件 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>