如何使用jquery获取多个文件上传的总文件大小

Question

我有一个用户可以上传多个文件的表单。

但我只想在所有文件的组合大小不超过 3GB 时允许他们这样做。我该怎么做？

这是我当前的代码：

var fileCount = 0;

var showFileCount = function() {
  $('#file_count').text('# Files selected: ' + fileCount);
};

showFileCount();

$(document).on('click', '.close', function() {
  $(this).parents('span').remove();
  fileCount -= 1;
  showFileCount();
})

$('#uploadFile').on('change', function() {

  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadFile')[0].files;
  for (var i = 0; i < files.length; i++) {
    var fileSize = (files[i].size / 1024 / 1024).toFixed(2);
    if (files[i].size > 3204448256) {
      // $("#input-file-1").html(file_names);
      alert("You have exceeded maximum allowed size 3GB")
      return true;
    }

    $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + ' (' + fileSize + ' MB)</div>' + '<p class="close" >X</p></span>');
  }
  fileCount += files.length;
  showFileCount();
});

.filenameupload {
  width: 98%;
}

#upload_prev {
  border: thin solid #000;
  width: 65%;
  padding: 0.5em 1em 1.5em 1em;
}

#upload_prev span {
  display: flex;
  padding: 0 5px;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="file_count"></div>
<input type="file" id="uploadFile" name="FileUpload" multiple="multiple" />
<div id="upload_prev"></div>

Same code, in JSFiddle

我有一个用户可以上传多个文件的表单。

但我只想在所有文件的组合大小不超过 3GB 时允许他们这样做。我该怎么做？

Answer 1

这样的事情会让你接近。

要确定上传的总文件大小，您需要首先遍历文件并将所有单个文件大小相加。 然后在您获得上传的总文件大小后，转换为 GB 进行比较，并检查它是否 > 3GB。如果是，则打印警报并返回以防止文件上传。

var fileCount = 0;

var showFileCount = function() {
  $('#file_count').text('# Files selected: ' + fileCount);
};

showFileCount();

$(document).on('click', '.close', function() {
  $(this).parents('span').remove();
  fileCount -= 1;
  showFileCount();
})

$('#uploadFile').on('change', function() {

  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadFile')[0].files;
  var totalSize = 0;

  for (var i = 0; i < files.length; i++) {
    // calculate total size of all files        
    totalSize += files[i].size;
  }
  //1x10^9 = 1 GB
  var sizeInGb = totalSize / 1000000000;
  if(sizeInGb > 3){
    alert("You have exceeded the maximum file upload size.");
    return false;
  }
  for (var i = 0; i < files.length; i++) {
   var fileSize = (files[i].size / 1024 / 1024).toFixed(2);

    $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + ' (' + fileSize + ' MB)</div>' + '<p class="close" >X</p></span>');
    
  }
  fileCount += files.length;
  showFileCount();
});

.filenameupload {
  width: 98%;
}

#upload_prev {
  border: thin solid #000;
  width: 65%;
  padding: 0.5em 1em 1.5em 1em;
}

#upload_prev span {
  display: flex;
  padding: 0 5px;
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="file_count"></div>
<input type="file" id="uploadFile" name="FileUpload" multiple="multiple" />
<div id="upload_prev"></div>