使用JQuery/Javascript获取组合上传文件的总大小

Question

我有一个用户可以上传文档的页面.还有一个按钮可以添加更多文档(如图所示).

我想检查已从上传部分添加或删除的每个文件,以确保大小不超过10 MB.

因此,如果用户上传3个单独的2 MB文件,然后添加一个5 MB的文件,则提交按钮将被禁用,直到其中一个文件被删除,因为它超过了10 MB的限制.

可以动态添加行,因此我按类进行操作并尝试将运行总计相加.

这是我到目前为止所提供的,可在JFIDDLE获得

<form class="upload-form">
  <input class='upload-file' type="file" id="upload0">
  <input class='upload-file' type="file" id="upload1">
  <input class='upload-file' type="file" id="upload2">
  <input class='upload-file' type="file" id="upload3">
  <input id='submitBtn' type=submit>
</form> 

问题是,如果我添加一个文件然后删除它,它就不会反映当前的运行总数.

$("document").ready(function() {

  var fileArr = [];

  $(".upload-file").on('change',function() {
    var fileInput = $('.upload-file');

    var fileSize = fileInput.get(0).files[0].size;
    fileArr.push(fileSize);

    var totalSize = 0;

    for (var i in fileArr) {
      alert(fileArr[i]);
      totalSize = totalSize + fileArr[i];             
    }

    if (totalSize > 10485759) {
      alert('Over Max Size');
      $(submitBtn).prop("disabled",true);
    }

  });
});

我也尝试过这种方式,但是在删除文件时无法重置.JFIDDLE-2

Answer 1

只需在each()循环内递增一个计数器,就可以简化代码中的逻辑.然后,您可以在循环完成后检查总计,以查看组合文件大小是否有效.试试这个:

$(".upload-file").on('change', function() {
  var totalSize = 0;

  $(".upload-file").each(function() {
    for (var i = 0; i < this.files.length; i++) {
      totalSize += this.files[i].size;
    }
  });

  var valid = totalSize <= 10485759;
  if (!valid) 
    alert('Over Max Size');

  $("#submitBtn").prop("disabled", !valid);
});

请注意,此方法也适用于multiple文件输入,如下面的jsFiddle所示:

更新了小提琴