文件总大小和更新计数器

Question

我需要计算上传文件的总大小，然后将其从 10 减少，因为总可用限制仅为 10MB。每次归档 upload/add 它应该从剩余 space 中减少。例如初始限制 10 MB。我上传了 1 个 3 MB 的文件，剩余 7 MB。现在另一个4MB的文件，剩下的应该是3MB。

问题：我可以在上传过程中禁用文件上传按钮吗？即使有任何文件正在上传，也应该禁用它，并且只有在所有文件都完成上传后才能添加更多文件。

$(document).ready(function(){
$("#addFile").click(function() {
    $("#my_file").click();
});

$("#my_file").change(function(e) {
    var files = e.target.files;

    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
    }
    function ParseFile(file) {
        var filename = file.name.replace(/\..+$/, '');
        var filesize = file.size / 1024;
        filesize = (Math.round((filesize / 1024) * 100) / 100);
        var filetype = file.type.split('/').pop().toUpperCase();
        if (filetype == 'PDF' || filetype == 'JPEG' || filetype == 'JPG' || filetype == 'PNG') {
            $("#filedetails").append("<tr><td><strong>" + filename + "</strong></td><td>" + filesize + " MB</td><td>" + filetype + "</td><td><a href='#'>Delete</td></tr>");
        }
        else {
            alert('Only JPG, PDF n PNG files are allowed to upload.');
        }
    }
});
});

<!doctype html>
<html>
<head>
  <title>File Upload</title>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script src="fileupload.js"></script>
</head>
<body>
  <input type="button" value="Add File(s)" id="addFile">
  <input type="file" id="my_file" style="display:none;" multiple="multiple" accept="image/png, image/jpg, image/jpeg, application/pdf">
  <table cellspacing="0" cellpadding="0" width="100%" border="1">
  <thead>
  <tr>
  <th>Name</th>
  <th>Size</th>
  <th>Type</th>
  <th></th>
  </thead>
  <tbody id="filedetails"></tbody>
</table>
<div id="totalsize">Total Uploaded File Size(s): </div>
</body>
</html>

Answer 1

您需要 return 从 ParseFile 函数到 foreach 循环的 filesize，并一起总结。但请记住 - 如果您想发送多个文件，您需要一次 select 所有文件。

当然必须有一些验证来检查 selected 文件是否大于 10MB。

  $(document).ready(function(){
var maxSize = 10, // MB
    currentSize = 0,
    remainSize = 0;

$("#addFile").click(function() {
  $("#my_file").click();
});

$("#my_file").change(function(e) {
  var files = e.target.files;

  for (var i = 0, f; f = files[i]; i++) {
    if (ParseFile(f) === false) {
      alert('not enought space - there\'s only ' + remainSize.toFixed(2) + ' MB left');
      break;
    }
  }

  $('#totalsize span').text(currentSize.toFixed(2));
  $('#remainsize span').text(remainSize.toFixed(2));

  function ParseFile(file) {
    var filename = file.name.replace(/\..+$/, '');
    var filesize = file.size / 1024;
    filesize = (Math.round((filesize / 1024) * 100) / 100);
    var filetype = file.type.split('/').pop().toUpperCase();
    if (filetype == 'PDF' || filetype == 'JPEG' || filetype == 'JPG' || filetype == 'PNG') {
      if (currentSize + filesize >= maxSize) {
        return false;
      }
      currentSize += filesize;
      remainSize = maxSize - currentSize;

      $("#filedetails").append("<tr><td><strong>" + filename + "</strong></td><td>" + filesize + " MB</td><td>" + filetype + "</td><td><a href='#'>Delete</td></tr>");
    }
    else {
      alert('Only JPG, PDF n PNG files are allowed to upload.');
    }
  }
});
  });

<!doctype html>
<html>
<head>
 <title>File Upload</title>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script src="fileupload.js"></script>
</head>
<body>
 <input type="button" value="Add File(s)" id="addFile">
 <input type="file" id="my_file" style="display:none;" multiple="multiple" accept="image/png, image/jpg, image/jpeg, application/pdf">
 <table cellspacing="0" cellpadding="0" width="100%" border="1">
  <thead>
   <tr>
    <th>Name</th>
    <th>Size</th>
    <th>Type</th>
    <th></th>
  </thead>
  <tbody id="filedetails"></tbody>
 </table>
 <div id="totalsize">Total Uploaded File Size(s): <span>0</span> MB</div>
 <div id="remainsize">Remain: <span>0</span> MB</div>
</body>
</html>

编辑： 下面是上述代码的扩展版本，实现了 'delete' 功能。 强烈建议重构。

$(document).ready(function(){

var maxSize = 10, // MB
  currentSize = 0,
  remainSize = 0;

function refreshSpace() {
 $('#totalsize span').text(currentSize.toFixed(2));
 $('#remainsize span').text(remainSize.toFixed(2));
}

$("#addFile").click(function() {
 $("#my_file").click();
});

$("#my_file").change(function(e) {
 var files = e.target.files;

 for (var i = 0, f; f = files[i]; i++) {
  if (ParseFile(f) === false) {
   alert('not enought space - there\'s only ' + remainSize.toFixed(2) + ' MB left');
   break;
  }
 }

 refreshSpace();

 function ParseFile(file) {
  var filename = file.name.replace(/\..+$/, '');
  var filesize = file.size / 1024;
  filesize = (Math.round((filesize / 1024) * 100) / 100);
  var filetype = file.type.split('/').pop().toUpperCase();
  if (filetype == 'PDF' || filetype == 'JPEG' || filetype == 'JPG' || filetype == 'PNG') {
   if (currentSize + filesize >= maxSize) {
    return false;
   }
   currentSize += filesize;
   remainSize = maxSize - currentSize;

   $("#filedetails").append("<tr data-filesize='" + filesize + "'><td><strong>" + filename + "</strong></td><td>" + filesize + " MB</td><td>" + filetype + "</td><td><a class='delete' href='#'>Delete</td></tr>");
  }
  else {
   alert('Only JPG, PDF n PNG files are allowed to upload.');
  }
 }
});

$("#filedetails").on('click', '.delete', function(e) {
 var $parent = $(this).closest('tr'),filesize = $parent.attr('data-filesize');
 currentSize -= filesize;
 remainSize = maxSize - currentSize;
 refreshSpace();
 $parent.remove();
});
});

<!doctype html>
<html>
<head>
 <title>File Upload</title>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script src="fileupload.js"></script>
</head>
<body>
 <input type="button" value="Add File(s)" id="addFile">
 <input type="file" id="my_file" style="display:none;" multiple="multiple" accept="image/png, image/jpg, image/jpeg, application/pdf">
 <table cellspacing="0" cellpadding="0" width="100%" border="1">
  <thead>
   <tr>
    <th>Name</th>
    <th>Size</th>
    <th>Type</th>
    <th></th>
  </thead>
  <tbody id="filedetails"></tbody>
 </table>
 <div id="totalsize">Total Uploaded File Size(s): <span>0.00</span> MB</div>
 <div id="remainsize">Remain: <span>10.00</span> MB</div>
</body>
</html>

文件总大小和更新计数器

File size total and update counter

jquery

ajax

filesize