jQuery File Upload显示剩余时间？

Question

嗨，我使用jQuery File Upload

它工作正常，我向用户显示出有类似的代码下面的上传进度的进度条：

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

在我的网页我刚才包括jQuery的。目前的fileupload.js文件。在progressall函数的数据中，我可以看到比特率，总文件大小和当前加载的数据，正如我所说的那样更新了我的进度条。然而，在网站上阅读这个link，这表明我可以获得额外的信息，包括剩余时间？但我一直无法得到这个工作。还有一个jquery.fileupload-ui.js文件 - 我试图在我的jquery.fileupload.js之后加入这个文件，但我没有看到剩余时间在progressall函数中添加到数据中。我也尝试删除jquery.fileupload.js，只是包括jquery.fileupload-ui.js，但打破了我的文件上传，它没有功能。

无论如何，我可以很容易地计算出使用比特率/数据加载和总大小的剩余时间，或者有人得到了正确方法的建议，我应该从插件中获得这个扩展信息。

Answer 1

鉴于扩展进度信息的例子，尝试...

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

...检查正在通过这个数据点上报的数据。然后，你可以访问你需要的东西。

Answer 2

我发现最简单的解决办法是在“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 3

使用比特率技术上工作，但它似乎是一个瞬时值，所以你的时间剩下需要大量的平滑，以防止它像疯了一样反弹。与其构建一些复杂的加权平均系统，仅仅使用所花费的时间和当前的进度来估计剩余时间会更容易。

首先，跺跺你的开始时间在添加回调的数据对象：

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

Answer 4

这是他们为自己的用户界面所做的。 可以使用数据参数

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

调用_renderExtendedProgress这样

_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) + ' %'; 
} 

您可以参考他们的索里的代码https://github.com/blueimp/jQuery-File-Upload/blob/7d46990486ff08acfc001b6368b09bce6712c2c2/js/jquery.fileupload-ui.js