带有整体进度条的fineuploader答案

【问题标题】：fineuploader with overall progressbar带有整体进度条的fineuploader
【发布时间】：2013-12-25 12:38:55
【问题描述】：

我正在使用 Fineuploader 将照片上传到我的网站。我可以获取和更新每个文件的进度，

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

但是我怎样才能得到整体的进展呢？

【问题讨论】：

uploadedBytes / totalBytes?
uploadedBytes / totalBytes 将返回每个文件的进度而不是整体进度（我同时上传多个文件
这是什么插件？文档在哪里？
fineuploader.com
在查看了文档（非常简短）之后，看起来并没有万无一失的方法。我的建议是计算所选文件的总数，并在每个文件成功上传后，移动一个进度条 X% (100%/QTY=X)。您可以通过 .on('submitted', function(event, id, filename) { filesToUpload++; } 来计算文件

标签： jquery upload fine-uploader

【解决方案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);
  }
});

这里是前端绑定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/屏幕阅读器集成，您也可以为此添加挂钩。

【讨论】：

【解决方案2】：

查看文档后（非常简短），看起来并没有万无一失的方法。我的建议是计算所选文件的总数，并在每个文件成功上传后，移动一个进度条 X%。

<div class="tot_progress" style="width:500px;">
    <div class="bar" style="width:0; color:green;"></div>
</div>

.on('submitted', function(event, id, filename) {
    filesToUpload++;
})
.on('complete', function(event, id, fileName, responseJSON) {                            
    uploadedFiles++;
    prog_width = Math.floor(100/filesToUpload)*uploadedFiles;
    $('.bar').css('width',prog_width+'%');
})

例如，假设我们要上传 4 个文件。第一个文件完成后，进度条将显示 25%，当第二个文件完成时，进度条将显示 50%...您可以为宽度设置动画，使其看起来更漂亮。

【讨论】：

我不建议这样做，除非您要上传大小相同的非常小的文件。一个真正的进度条应该比这更敏感，因为它应该随着实际字节发送到服务器而更新。我的回答显示了如何做到这一点。
@RayNicholus 我可以理解有一种更高级/更精确的实时进度方法，但我建议的方法没有任何问题。我只是在防御，因为您使用“我不建议这样做”这样的话，就好像它有问题一样。如果你写了“有更好的方法来实现这一点”，那就更好了。我碰巧喜欢仅在文件实际完成时才显示完成百分比的方法。
很公平。我只是假设 OP 想要反映 Fine Uploader 提供的内置每个文件进度条的行为。

【解决方案3】：

做到这一点并不难，而且比在每个文件完成后简单地增加进度条要好得多。在大多数情况下，您需要使用progress event。其实我什至详述了how you can create your own aggregate progress bar in a blog post I wrote。

例如（来自博客文章）：

var perFileProgress = {};

$(element).fineUploader({
    ...
    callbacks: {
        onProgress: function(id, name, sent, total) {
            perFileProgress[id] = [sent, total];
            updateTotalProgress();
        },

        onCancel: function(id) {
            if (qq.supportedFeatures.progressBar) {
                delete perFileProgress[id];
                updateTotalProgress();
            }
        },

        onComplete: function(id, name, response) {
            if (!response.success) {
                delete perFileProgress[id];
                updateTotalProgress();
            }
        }
        ...
    }
});

function updateTotalProgress() {
    var $container = $("#totalProgress"),
        $bar = $container.find(".progress-bar"),
        totalSent = 0,
        totalSize = 0,
        percentComplete = 0;

    $.each(perFileProgress, function(fileId, progressData) {
        totalSent += progressData[0];
        totalSize += progressData[1];
    });
    percentComplete = Math.round((totalSent/totalSize) * 100);

    if (totalSent !== totalSize) {
        $bar.css({
            width: percentComplete + "%"
        });

        $container.removeClass("hide");
    }
    else {
        $container.addClass("hide");
    }
}

注意：我上面的代码假设您使用的是引导程序，但这当然不是必需的，如果需要，您可以很容易地删除对引导程序的依赖。

【讨论】：