上传文件检测显示进度

 

方法太长不好截图

//上传进度实现方法，上传过程中会频繁调用该方法
function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
if (evt.lengthComputable) {//
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
}
var time = document.getElementById("time");
var nt = new Date().getTime();//获取当前时间
var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
ot = new Date().getTime(); //重新赋值时间，用于下次计算

var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算

//上传速度计算
var speed = perload/pertime; //单位b/s
var bspeed = speed;
var units = 'b/s';//单位名称
if(speed/1024>1){
speed = speed/1024;
units = 'k/s';
}
if(speed/1024>1){
speed = speed/1024;
units = 'M/s';
}
speed = speed.toFixed(1);
//剩余时间
var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
if(bspeed==0)
time.innerHTML = '上传已取消';
}

 

 

接下来就是后台了

 

 

转载于:https://www.cnblogs.com/bjh-123/p/10132802.html