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

以下是前端绑定到引导程序的相关代码：

<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 /屏幕阅读器集成，你也可以为它添加钩子。

Answer 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％...您可以设置宽度的动画，使其看起来更漂亮。

Answer 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");
    }
}

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

具有整体进度条的fineuploader

3 个答案: