【发布时间】：2016-11-22 02:36:58
【问题描述】：
基本上，我创建了一个简单的项目，用户可以在其中拖放以将文件上传到服务器。只是为了通知用户完成该过程需要多长时间，我需要显示他们的上传速度。我发现了这个问题estimate users' upload speed without direct permission 但它完全不适合我的项目。
这是我如何上传文件的代码：
function upload(file){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
xhr.upload.addEventListener('progress', function(e){
$('.upgbar').show();
$('.trkpb').css('width', (e.loaded/e.total*100)+"%");
var loaded = e.loaded;
var total = e.total;
var progressValue = Math.round( ( e.loaded / e.total ) * 100 );
var seconds_elapsed = ( new Date().getTime() - started_at.getTime() )/1000; var bytes_per_second = seconds_elapsed ? loaded / seconds_elapsed : 0 ;
var Kbytes_per_second = bytes_per_second / 1000 ;
var remaining_bytes = total - loaded;
var seconds = seconds_elapsed ? remaining_bytes / bytes_per_second : 'calculating' ;
$('.time_re').text("Time Remaining: "+seconds.charAt(0));
}, false);
xhr.open('post','../uploadtostack',true);
xhr.setRequestHeader('X-File-Name',file.name);
xhr.setRequestHeader('x-File-Size',file.size);
xhr.setRequestHeader('X-File-Type',file.type);
xhr.send(file);
}
通过xhr.upload.addEventListener我可以估计剩余时间和上传的数据量但不知道如何调整这个来显示上传速度。如果你可能会为什么我在$('.time_re').text("Time Remaining: "+seconds.charAt(0)); 行出现错误
TypeError: seconds.charAt 不是函数[了解更多]
如果有人能告诉我如何在 javascript 中实现语音检测器，我将不胜感激 || jQuery。问候
【问题讨论】：
-
查找文件上传管理器。您最好报告文件已上传的数量与文件的实际大小。
-
用户到您的服务器的连接速度会波动，因为除了他们的互联网连接之外还有很多变量。在我的脑海中有：用户的互联网连接，您的服务器的互联网连接，您的网络服务器上的当前负载（如果它陷入困境，它不会很快处理），用户计算机上的 CPU 开销，..等等。 @Mike C 提出的建议对最终用户来说更可靠、更有价值。
-
我认为这些问答可以很好地了解如何做到这一点：stackoverflow.com/questions/21027888/calculate-upload-speed 和 stackoverflow.com/questions/15472251/… — 检查成功和失败的 XHR。
-
@MikeC 我不认为我在关注你。你的意思是我应该检查服务器上接收到的字节数并回复速度吗？
-
@mrjorden 差不多。您需要设置某种轮询或 websocket 连接。很多人都遇到过这个问题，所以有很多关于它的信息。
标签： javascript jquery