如何在javascript中检查上传速度?

如何在javascript中检查上传速度?,javascript,jquery,Javascript,Jquery,基本上,我创建了一个简单的项目,用户可以通过拖放将文件上传到服务器。只是为了告诉用户完成这个过程需要多长时间,我需要显示他们的上传速度。我发现了这个问题,但它并不适合我的项目 下面是我上传文件的代码: function upload(file){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE

基本上,我创建了一个简单的项目,用户可以通过拖放将文件上传到服务器。只是为了告诉用户完成这个过程需要多长时间,我需要显示他们的上传速度。我发现了这个问题,但它并不适合我的项目

下面是我上传文件的代码:

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行(“剩余时间:“+seconds.charAt(0))处出现错误

TypeError:seconds.charAt不是函数[了解更多信息]


如果有人能告诉我如何用javascript | | jquery实现speechecker,我将不胜感激。关于

您可以尝试在之前发送定义大小的文件,并使用此文件计算估计时间。 示例:demo file.txt>大小10k 1秒
另一个:filetoupload.txt>size 20k预期时间2秒

查找文件上载管理器。你最好报告文件的上传量,而不是文件的实际大小。用户与服务器的连接速度会波动,因为除了他们的互联网连接之外,还有很多变量。我脑海中浮现的是:用户的互联网连接、服务器的互联网连接、Web服务器上的当前负载(如果它陷入困境,它将无法快速处理)、用户计算机上的CPU开销等等。@Mike C提出的建议对最终用户来说更加可靠和有价值。我认为这些Q&A很好地洞察了如何做到这一点:检查成功和失败的XHR。@MikeC我不认为我在跟踪你。你的意思是我应该检查服务器上接收的字节数并回复速度吗?@mrjorden。您需要设置某种轮询或websocket连接。很多人都有这个问题,所以有很多关于它的信息。为什么我需要发送一个文本文件并检查它的速度?它不能与我的正常上传文件一起工作吗?因为javascript不能提供这些信息,但是你也可以上传第一个文件,并用这段时间估计上传时间,如果上传真实文件时上传速度提高或降低了怎么办?你可以累积并促进所有成功上传的次数,这样可以获得更好的近似结果。我很少投反对票,但这在很多方面都是错误的。您正在采取一项不必要的资源消耗行动,以估计在同一时间发生的另一项资源消耗行动的持续时间,而这一行动实际上是在相互竞争的环境中发生的。