上传文件进度条 （已上传大小、总大小、速度、剩余时间、已用时间）
效果
引入
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
1、html
<div> <span>上传文件：</span><input type="file" name="file" id="myFile" onchange="uploadTeamworkFile(this)"> <div class="show_info"> 文件信息:... </div> <div class="show_result"> 返回结果:... </div> </div> <div class="col-md-offset-3 col-md-6"> <div id="loadingpy" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:rgba(0,0,0,0.5)"> <div class="progressContent"> <div class="progresscon"> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped active" id="mt-progress-length" style="width: 0%;"> <div class="progress-value" id="mt-progress-value">0%</div> </div> </div> </div> <div class="speedNumberShow"> <span>已上传：</span><i>602M</i><span>总大小：</span><i>800M</i><span>速度：</span><i>203KB/S</i><span>剩余时间：</span><i>3分53秒</i><span>已用时间：</span><i>10分06秒</i> </div> </div> </div> </div>
2、js
<script>
var myXhr;
var myot; //上传开始时间
var myoloaded; //上传文件大小
function uploadTeamworkFile(obj) {
var file = obj.files[0];
var name = file.name;
var size = file.size;
var type = file.type;
url = window.URL.createObjectURL(file);
$(".show_info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url);
//创建formData对象 初始化为form表单中的数据
//需要添加其他数据 就可以使用 formData.append("property", "value");
var formData = new FormData();
var fileInput = document.getElementById("myFile");
var file = fileInput.files[0];
formData.append("file", file);
uploadInitProfn(); //初始化进度条样式
// ajax异步上传
$.ajax({
url: "http://localhost:1001/login/upload", //url 需后台提供
type: "POST",
data: formData,
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false, //必须false才会避开jQuery对 formdata 的默认处理
enctype: 'multipart/form-data',
xhr: function () {
//获取ajax中的ajaxSettings的xhr对象 为他的upload属性绑定progress事件的处理函数
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener("progress", resultProgress, false); //【上传进度调用方法实现】
//检查其属性upload是否存在
myXhr.upload.onloadstart = function(){//上传开始执行方法
myot = new Date().getTime(); //设置上传开始时间
myoloaded = 0;//设置上传开始时，以上传的文件大小为0
};
}
return myXhr;
},
success: function (data) {
console.log("aaa");
},
error: function (data) {
console.log("cccc");
}
})
}
//初始化进度条样式
function uploadInitProfn(){
//背景恢复
$(".progress-bar-info").css("background-color","#5bc0de");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%"});
$("#mt-progress-value").html("0%");
$(".progressContent .progress-value").css({"background":"#5bc0de"});
$(".progress .progress-value").remove("change");
$(".progress-bar.active").css("animation","reverse progress-bar-stripes 0.40s linear infinite, animate-positive 0.1s");
$(".speedNumberShow").html(""); //清空提示信息
$("#loadingpy").show(); //进度条显示
}
//上传进度回调函数
function resultProgress(evt) {
if (evt.lengthComputable) {
var percent = evt.loaded / evt.total * 100;
var percentStr = String(percent);
if (percentStr == "100") {
percentStr = "100.0";
}
percentStr = percentStr.substring(0, percentStr.indexOf("."));
$("#mt-progress-value").html(percentStr+"%");
$("#mt-progress-length").css("width", percentStr + "%");
var mynt = new Date().getTime();//获取当前时间
var pertime = (mynt-myot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
myot = new Date().getTime(); //重新赋值时间，用于下次计算
var perload = evt.loaded - myoloaded; //计算该分段上传的文件大小，单位b
myoloaded = 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);
console.log(evt.total+"===="+evt.loaded+"===="+bspeed+"===="+resttime);
resttime = s_to_hs(resttime);
//已用时间
var usedtime = (evt.loaded/bspeed).toFixed(1);
usedtime = s_to_hs(usedtime);
var speedStr = '<span>已上传：</span><i>'+evt.loaded+'M</i><span>总大小：</span><i>'+evt.total+'M</i><span>速度：</span><i>'+speed+units+'</i><span>剩余时间：</span><i>'+resttime+'</i><span>已用时间：</span><i>'+usedtime+'</i>'
$(".speedNumberShow").html(speedStr);
if (percentStr == "100") {
setTimeout(function () {
//动画禁止，变颜色
$(".progress-bar-info").css("background-color","#41b680");
$(".progress-bar.active").css("animation","unset");
$(".progressContent .progress-value").css({"background":"#41b680"});
$(".progress .progress-value").addClass("change");
}, 500);
}
}
}
function s_to_hs(s){
//计算分钟
//算法：将秒数除以60，然后下舍入，既得到分钟数
var h;
h = Math.floor(s/60);
//计算秒
//算法：取得秒%60的余数，既得到秒数
s = s%60;
//将变量转换为字符串
h += '';
s += '';
//如果只有一位数，前面增加一个0
h = (h.length==1)?'0'+h:h;
s = (s.length==1)?'0'+s:s;
if(s<=60){
return s+'秒';
}else {
return h+'分'+s+'秒';
}
}
</script>
3、css
<style type="text/css"> .demo { padding: 2em 0; background: linear-gradient(to right, #2c3b4e, #4a688a, #2c3b4e); } .progressContent{ margin-top: 16%; margin-left: 35%; } .progressContent .progress { height: 15px; background: #262626; padding: 2px; overflow: visible; border-radius: 20px; width: 100%; margin-bottom:0; } .progressContent .progresscon{ width:48%; margin-top: 5px; } .progress .progress-bar { border-radius: 20px; position: relative; animation: animate-positive 0.1s; } .progressContent .progress-value { display: block; padding: 3px 7px; font-size: 13px; color: #fff; border-radius: 4px; background: #5bc0de; position: absolute; top: -36px; right: -16px; } .progress .progress-value:after { content: ""; border-top: 10px solid #5bc0de; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; bottom: -6px; left: 26%; } .progress .progress-value.change:after{ border-top: 10px solid #41b680; } .progress-bar.active { animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 0.1s; } .speedNumberShow{ color:#f2efef; margin-top: 3px; } .speedNumberShow span{ font-size:12px; } .speedNumberShow i{ font-style: normal; font-size:14px; margin-right: 11px; } @-webkit-keyframes animate-positive { 0% { width: 0; } } @keyframes animate-positive { 0% { width: 0; } } </style>
