JSファイルのアップロードと進捗バーの実現

JSファイルをアップロードします.

このラベルはファイルアップロードの操作ができます.ここでは詳しくは言いません.ここでは主に進捗バーの実現について説明します.
プログレスバーを実現するには、対象を知る必要があります.  Progressventインターフェース
このインターフェースは3つの属性があります.全部読み取り専用です.

Progesent.lengthComputable  現在の作業が測定可能かどうかを示します.falseであれば、loadedとtotalの二つのインターフェースは利用できません.これはtrue

です.

Progress Event.loaded 完了した進捗を示し、ファイル自体のみを計算し、HTTP要求のオーバヘッド

を含まない.

Progess Event.total  現在の作業の総量を表し、ファイル自体のみを計算し、HTTP要求のオーバヘッド

を含まない.
下に直接コードを入れます.
HTML

    

//   

这里有一个表单上传域，以及一个进度条的样式

JS

function upfile(){
    var pic=document.getElementsByTagName('input')[0].files[0];
    var fd=new FormData();
    var xhr=new XMLHttpRequest();
    xhr.open('post','01.php',true);

    xhr.onreadystatechange=function (){
        //readystate 4          
        if(this.readyState==4){
            document.getElementById('precent').innerHTML=this.responseText;
            //           
        }
    }

    xhr.upload.onprogress=function (ev){
        //  ev.lengthComputable true           
        //     = 100* ev.loaded/ev.total
        if(ev.lengthComputable){
            var precent=100 * ev.loaded/ev.total;
            console.log(precent);
            //     ，    
            document.getElementById('bar').style.width=precent+'%';
            document.getElementById('precent').innerHTML=Math.floor(precent)+'%';
        }
    }
    fd.append('pic',pic);
     
    xhr.send(fd);
     
}

1、jsはev.lengthComputableの進捗を検出し、アップロード進捗の計算を開始する.
2、アップロード進捗率=100*  ev.loaded/ev.total