Question

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

但是我只想让它们在所有文件的总大小不超过3GB时这样做。我怎么能这样做？

这是我目前的代码

var fileCount = 0;

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

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);
    totalSize = totalSize + files[i].size;

if(totalSize > 3204448256){

   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();
});

css代码

.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;
}

我的javascript代码

<div id="file_count"></div>
<input type="file" id="uploadFile" name="FileUpload" multiple="multiple" />
<div id="upload_prev"></div>

这是我的工作小提琴代码

https://fiddle.jshell.net/vijayak7803/4ny3qna6/11/

Answer 1

这是一个简单的演示，演示如何计算所选文件的大小并等待上传。

将文件放入数组中，因为通过$('#uploadFile')选择文件会导致以前的文件消失。

注意：如果您不想多次上传同一文件，则需要在Files之前检查该文件是否已存在push()。

然后，遍历所有文件并计算总和。

var Files = [];

$('#uploadFile').on('change', function() {
  console.log(this.files)
  $.each(this.files, (i, file) => Files.push(file))
  calculateTotalSize()
})

function calculateTotalSize() {
  var totalSize = 0;
  Files.map((file) => totalSize += file.size)
  $('#file_count').text(`Total size: ${totalSize}`)
}

.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>

如何使用jquery显示多个文件的总文件大小

1 个答案: