效果
引入
<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>