jQuery文件上传显示剩余时间？

Question

嗨,我正在使用jQuery文件上传

它工作正常,我向用户显示一个进度条,显示上传进度,代码如下:

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
});

在我的页面上,我刚刚包含了jquery.fileupload.js文件.在progressall函数的数据中,我可以看到比特率,总文件大小和当前加载的数据,正如我所说,按预期更新我的进度条.但是,在网站上阅读此链接表明我可以获得额外信息,包括剩余时间？然而,我一直无法做到这一点.还有一个jquery.fileupload-ui.js文件 - 我尝试在我的jquery.fileupload.js之后包含它,但我没有看到时间仍然有问题被添加到progressall函数中的数据.我也试过删除jquery.fileupload.js,只是包含了jquery.fileupload-ui.js但是这打破了我的文件上传而且它没有运行.

无论如何,我可以轻松地计算使用比特率/数据加载和总大小的剩余时间,还是有人建议我应该从插件中获得这个扩展信息的正确方法？

Answer 1

我发现最简单的解决方案是计算"fileuploadprogress"事件中的时间:

var secondsRemaining = (data.total - data.loaded) * 8 / data.bitrate;

在我的情况下,我只包括jquery.fileupload.js而不是jquery.fileupload-ui.js所以我更喜欢这个解决方案.

但是,当您包含jquery.fileupload-ui.js组件时,您可以获得"扩展进度"信息,但我相信这仅适用于"fileuploadprogressall"事件而不适用于"fileuploadprogress".https://github.com/blueimp/jQuery-File-Upload/wiki/Extended-progress-information

Answer 2

使用比特率在技术上起作用,但它似乎是一个瞬时值,所以你的剩余时间需要大量的平滑,以防止它像疯了一样弹跳.不是建立一些复杂的加权平均系统,而是更容易使用花费的时间和当前进度来估计剩余时间.

首先,在add回调中标记数据对象的开始时间:

input.bind('fileuploadadd', function(e, data) {
  ...
  data.submitted = new Date().getTime();
  data.submit();
});

然后在进度回调中保持一个漂亮,平稳的时间非常容易:

input.bind('fileuploadprogress', function(e, data) {
  var progress = data.loaded / data.total;
  var timeSpent = new Date().getTime() - data.submitted;
  var secondsRemaining = Math.round(((timeSpent / progress) - timeSpent) / 1000);
});