上傳文件進度條 （已上傳大小、總大小、速度、剩余時間、已用時間）

效果

 

 

 

 

引入

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