jquery - 带有整体进度条的fineuploader

Question

我正在使用fineuploader 将照片上传到我的网站。 我可以通过以下方式获取和更新每个文件的进度:

.on('progress', function (event, id, filename, uploadedBytes, totalBytes)

但是我怎样才能获得整体进度呢？

Answer 1

作为此问题的更新，现在有一种非常简单且有效的方法可以做到这一点。文档位于docs.fineuploader.com ，也可以获得更新as a progress bar 。我还发现这段文字与 Bootstrap's Progress Bar / Label functionality 结合起来很好。 .

$(element).fineUploader({
...
})
.on("totalProgress", function(event, totalUploadedBytes, totalBytes) {
  var progressPercent = (totalUploadedBytes / totalBytes).toFixed(2);
  if(isNaN(progressPercent)) {
    $('#progress-text').text('');
  } else {
    var progress = (progressPercent * 100).toFixed() + '%';

    $('#progress-text').text(progress);
  }
});

这是前端绑定(bind)到 Bootstrap 的相关代码:

<div id="progress-bar-container" class="qq-total-progress-bar-container-selector progress">
  <div id="progress-bar" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar progress-bar progress-bar-info progress-bar-striped active" role="progressbar">
    <span id="progress-text"></span>
  </div>
</div>

如果您想保留 Bootstrap ARIA/屏幕阅读器集成，您也可以为其添加 Hook 。