Basically I have created a simple project where users can drag and drop to upload a file to server. Just to inform the user how long would it take to complete the process I need to show their upload speed. I found this question estimate users' upload speed without direct permission But It quite didn't suited my project.
So here is my code how i'm upload the file:
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);
}
through xhr.upload.addEventListener
I can estimate the time remaining and the amount of data uploaded But don't know to munipulate this to show me the upload speed. and If you Might why am I getting an error at line $('.time_re').text("Time Remaining: "+seconds.charAt(0));
TypeError: seconds.charAt is not a function[Learn More]
I would really appreciate if someone could tell me how to implement a speechecker in javascript || jquery. Regards