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所示：

Updated fiddle

Answer 2

这是一个工作http://jsfiddle.net/9bhcB/1214/

的小提琴

将您的javascript更改为：

$("document").ready(function(){ 
    $(".upload-file").on('change',function() {
       var fileArr = [];
        $.each($(".upload-file"), function(index, value) {
         input = value;
         file = input.files[0];
         fileArr.push(file.size);
          var totalSize = 0;

               for (var i in fileArr) {

                  totalSize = totalSize + fileArr[i];             
                                }

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

      });



    });

    });

Answer 3

看着你的小提琴 -

fileInput.get（0）.files [0] .size;仅在添加文件时返回大于0的值
因为上传元素被删除＆＃34;如同取消选择一样，你得到的只是一个空的文件数组。所以，你需要跟踪文件的ID和它们的大小，并根据它来计算所有文件的组合大小......

以下是获取元素ID的方法＆＃34;已更改＆＃34; -

var elmId = $( this ).attr('id');

并使用它来跟踪文件大小。

我把你的小提琴分开来做这个工作。干得好 - http://jsfiddle.net/9bhcB/1226/

此外，还有很多快速而又脏的JS，你可能需要清理它，但它可以满足您的需求！

Answer 4

代码的替代解决方案是一个输入，允许一次上传多个文件。然后，文件集合可以slice - d up并使用较小的函数进行总计：

$(function() {
  $('#file').on('change', function() {
    var total = [].slice.call(this.files).map(function(x) {
      return x.size || x.fileSize;
    }).reduce(function(a, b) {
      return a + b;
    }, 0);

    if (total > 10485759) {
      alert('Over Max Size');
      $('#submitBtn').prop("disabled", true);
    } else {
      $('#submitBtn').prop("disabled", false);
    }


    $('#total').html('Total: ' + total + ' bytes');
  })
})

#total {
  padding: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" multiple="multiple" />
<button id="submitBtn">Submit Files</button>
<div id="total"></div>

使用JQuery / Javascript

4 个答案: