Javascript 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，但这破坏了我的文件上传，它无法正常工作

---

我是否可以使用加载的比特率/数据和总大小轻松计算剩余时间，或者是否有人建议我从插件中获取扩展信息的正确方法？

给出扩展进度信息的示例，请尝试

$('#fileupload').bind('fileuploadprogress', function (e, data) {
    // Log the current bitrate for this upload:
    // console.log(data.bitrate);
    console.log(data);
});

---

。。。检查通过此数据点报告的数据。然后，您可以访问所需内容。

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

在我的例子中，我只包括jquery.fileupload.js，而不包括jquery.fileupload-ui.js，所以我更喜欢这个解决方案

---

但是，当您包含jquery.fileupload-ui.js组件时，您可以获得“扩展进度”信息，但我相信这只适用于“fileuploadprogressall”事件，而不适用于“fileuploadprogress”

从技术上讲，使用比特率是可行的，但它似乎是一个瞬时值，因此您剩余的时间需要进行大量平滑处理，以防止比特率疯狂反弹。与其建立一些复杂的加权平均系统，不如简单地使用所花费的时间和当前的进度来估计剩余的时间

首先，在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);
});

然后，在进度回调中很容易获得一个好的、平滑的剩余时间：

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

---

这就是他们为自定义ui所做的。 可以在中使用数据参数

$('#fileupload').bind('fileuploadprogress', function (e, data) {
    _renderExtendedProgress(data);
});

像这样调用_renderestendedProgress

_renderExtendedProgress: function (data) {
    return this._formatBitrate(data.bitrate) + ' | ' +
        this._formatTime(
            (data.total - data.loaded) * 8 / data.bitrate
        ) + ' | ' +
        this._formatPercentage(
            data.loaded / data.total
        ) + ' | ' +
        this._formatFileSize(data.loaded) + ' / ' +
        this._formatFileSize(data.total);
}

_formatFileSize: function (bytes) {
    if (typeof bytes !== 'number') {
        return '';
    }
    if (bytes >= 1000000000) {
        return (bytes / 1000000000).toFixed(2) + ' GB';
    }
    if (bytes >= 1000000) {
        return (bytes / 1000000).toFixed(2) + ' MB';
    }
    return (bytes / 1000).toFixed(2) + ' KB';
}

_formatBitrate: function (bits) {
    if (typeof bits !== 'number') {
        return '';
    }
    if (bits >= 1000000000) {
        return (bits / 1000000000).toFixed(2) + ' Gbit/s';
    }
    if (bits >= 1000000) {
        return (bits / 1000000).toFixed(2) + ' Mbit/s';
    }
    if (bits >= 1000) {
        return (bits / 1000).toFixed(2) + ' kbit/s';
    }
    return bits.toFixed(2) + ' bit/s';
}

_formatTime: function (seconds) {
    var date = new Date(seconds * 1000),
        days = Math.floor(seconds / 86400);
    days = days ? days + 'd ' : '';
    return days +
        ('0' + date.getUTCHours()).slice(-2) + ':' +
        ('0' + date.getUTCMinutes()).slice(-2) + ':' +
        ('0' + date.getUTCSeconds()).slice(-2);
}

_formatPercentage: function (floatValue) {
    return (floatValue * 100).toFixed(2) + ' %';
}

---

你可以在

中查看他们的源代码，你确定你有最新版本的插件吗？纯数学：在开始上传时获取时间戳，并将其保存到某个变量，在每次勾选

progressall

函数时，只需计算上传的时间和百分比。例如，如果上传在10秒前开始，并且完成了25%，则剩余时间为10/25*100-10秒。刚刚意识到时间属性仅适用于进度功能，而不是progressAll功能-非常有用，谢谢。恼人的是，人们是如何否决有用的答案的。