上传文件进度条 （已上传大小、总大小、速度、剩余时间、已用时间）

效果

 

 

 

 

引入

<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>