上一篇: 如何在模态内单击按钮时使用jQue... 下一篇:jquery – 为什么我的主页下面有...

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

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了使用JQuery / Javascript获取组合上传文件的总大小，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我想检查已从上传部分添加或删除的每个文件,以确保大小不超过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 @R_890_10586@lSize = 0;

    for (var i in fileArr) {
      alert(fileArr[i]);
      @R_890_10586@lSize = @R_890_10586@lSize + fileArr[i];             
    }

    if (@R_890_10586@lSize > 10485759) {
      alert('Over Max Size');
      $(submitBtn).prop("disabled",truE);
    }

  });
});

我也试过这种方式,但是当文件被删除时无法重置.00003

解决方法

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

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

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

  var valid = @R_890_10586@lSize <= 10485759;
  if (!valid) 
    alert('Over Max Size');

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