嗨,我使用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”事件中的计算时间:
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