Javascript jQuery：在表单中动态添加文件上载字段并验证总大小

是否可以使用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--;
  })
});

$（文档）.ready（函数（）{
var max_字段=10；
变量包装=$（“.input_fields_wrap”）；
var add_button=$（“.add_field_button”）；
var x=1；
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x

小提琴：

任何关于如何解决这一问题的意见都将不胜感激

---

更新：新的Fiddle-with-implemented解决方案：

我在上传功能中将文件大小限制设置为3MB

$（文档）.ready（函数（）{
var max_字段=10；
变量包装=$（“.input_fields_wrap”）；
var add_button=$（“.add_field_button”）；
var x=1；
var uploadField=document.getElementById（“文件”）；
uploadField.onchange=函数（）{
如果（此.files[0].size>307200）{
警告（“文件太大！”）；
此值为“”；
}
否则{
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x

您可以使用HTML5获得尺寸。例如，要获取页面中所有文件的总大小（以字节为单位）：


函数getTotal（）{
var合计=0；
$（':file'）。每个（函数（）{
if（this.files&&this.files[0]）{
总计+=此。文件[0]。大小；
}
});
返回总数；
}
$（函数（）{
var maxSize=3*1000*1000；//~3MB
$（document）.on（'change'，'：file'，function（）{
if（getTotal（）>maxSize）{
//净场
$（this.val（“”）；
//显示错误？
$（'#total'）。追加（'太大'）；
}否则{
//更新总数
$（'#total'）.text（getTotal（））；
}
});
});
输入{
显示：块；
}

总字节数：0
op代码中的add（添加）按钮添加了另一个输入字段，该字段没有ID，因此您可以为您的响应上传超过3MB的字节。这非常适合验证/限制每个文件的最大大小，但我一直在寻找一种方法来总结添加的所有文件的总大小。感谢您的回复@Pablo，它看起来很有希望。我曾尝试实现该功能，但没有成功。如果您有时间，我将非常感谢Fiddle实现。@TNF使用原始的
getTotal（）
函数添加了一个工作片段。非常感谢@Pablo，我非常感谢！它工作完美无瑕。如果有人感兴趣，我已经用一把小提琴更新了这个问题。