j查询文件上传显示剩余时间
jQuery File Upload show time remaining?
嗨,我正在使用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但是这破坏了我的文件上传并且它不起作用。
无论如何,我可以使用加载的比特率/数据和总大小轻松计算剩余时间,或者是否有人建议我应该从插件中获取此扩展信息的正确方法?
我发现最简单的解决方案是计算"文件上传进度"事件中的时间:
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
使用比特率在技术上是可行的,但它似乎是一个瞬时值,因此您的剩余时间将需要大量平滑处理,以防止它像疯了一样弹跳。与其构建一些复杂的加权平均系统,不如使用花费的时间和当前进度来估计剩余时间。
首先,在添加回调中的数据对象上标记开始时间:
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);
});
像这样称呼_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 中参考他们的代码
给定扩展进度信息的示例,请尝试...
$('#fileupload').bind('fileuploadprogress', function (e, data) {
// Log the current bitrate for this upload:
// console.log(data.bitrate);
console.log(data);
});
。检查通过此数据点报告的数据。 然后,您可以访问所需的内容。
- Java脚本时间添加
- Json数据包含日期和时间格式
- 如何根据时间运行不同的脚本
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 在wordpress一定时间后更改自定义字段
- 更改angularjs中的日期-时间格式
- 将当前时间添加到我的页面上的特定部分
- 门户网站:当地时间有多有用
- 显示时间的脚本
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- 通过JSON&比较时间
- Javascript时间轨迹
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 将日期时间从json转换为可读格式
- 文章的日期/时间<时间>
- 处理日期时间时间戳javascript(angularjs)和mongo的滑块
- 如何在 JavaScript 中计算“时间 1”-“时间 2”
- Javascript:存储当前时间's时间戳值
- 如何用具有特定持续时间/时间的事件填充Kendo Scheduler
- 从工作时间时间范围内减去午餐时间