ファイルアップロードの進行状況のヒント

需要
アップロードされたファイルが比較的大きい場合、ユーザーは長い時間待つ必要があるかもしれませんが、この場合、フロントエンドに何のヒントもなければ、体験はあまりよくありません.アップロードの進捗ヒントがあれば、ずっとよくなります.アップロードプロセスでアップロードの進捗状況をリアルタイムで表示するには、アップロードされたサイズとファイルの合計サイズが必要です.
前提条件

リクエストは非同期です.アップロードの進捗状況をリアルタイムで取得するには、リクエストは非同期で、同期であればリクエストが完了するまで応答を取得できません.

インプリメンテーション
ここでまとめたのは主にjs側であり,進捗バーの表示については,semanticが進捗バーの実装を持参し,直接使用すればよい,なければdiv幅を自分で変更するなどの方法で実現できるUIフレームワークがあるが,ここでは後述しない.
ファイルのアップロードの進捗状況を取得するにはどうすればいいですか?JavascriptのXMLHttpRequestは、ファイルがアップロードされたサイズと合計サイズを返すprogressイベントを提供しています.この2つの値に基づいて、アップロードの進捗状況を計算することができます.この方法については、『Javascriptプレミアムプログラミング(第3版)』21章第3節で述べていますが、この本は手で読むことができます.次にコードを貼ります.
XMLHttpRequest:progressイベント
JavascriptのXMLhttpRequestのprogressイベントを使用して、実装例のコードは次のとおりです.

var formData = new FormData(); 
formData.append("file", document.getElementById('file').files[0]); 
formData.append("token", token_value); //           

var xhr = new XMLHttpRequest();
xhr.open('POST', '/uploadurl');
//           
xhr.onload = function () {
  if (xhr.status === 200) {
　　console.log('    ');
  } else {
  　console.log('    ');
  }
};
//       
xhr.upload.onprogress = function (event) {
  if (event.lengthComputable) {
    var percent = Math.floor(event.loaded / event.total * 100) ;
    //       
    $("#J_upload_progress").progress('set progress', percent);
  }
};
xhr.send(formData);

FormData XMLHttpRequestについては、W 3 Cを探して詳細を知ることができます.
jQueryパッケージのxhrjQueryは、xhrのインプリメンテーションをカプセル化し、jQueryのajaxを使用してアップロードの進捗状況を取得することもでき、サンプルコード:

var formData = new FormData(); 
formData.append("file", document.getElementById('file').files[0]); 
formData.append("token", token_value); 

$.ajax({ 
    url: "/uploadurl", 
    type: "POST", 
    data: formData, 
    processData: false, //    data         ，   true
    contentType: false, //     Content-Type   ，         multipart/form-data    
    xhr: function(){
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){
          myXhr.upload.addEventListener('progress',function(e) {
            if (e.lengthComputable) {
              var percent = Math.floor(e.loaded/e.total*100);
              if(percent <= 100) {
                $("#J_progress_bar").progress('set progress', percent);
                $("#J_progress_label").html('   ：'+percent+'%');
              }
              if(percent >= 100) {
                $("#J_progress_label").html('      ，   ...');
                $("#J_progress_label").addClass('success');
              }
            }
          }, false);
        }
        return myXhr;
    },
    success: function(res){ 
        //     
    },
    error: function(res) {
        //     
        console.log(res);
    }
}); 
 

jQuery ajaxのxhrについては、具体的にはW 3 Cを参照してください.
vue-resource

var formData = new FormData();
formData.append('token', token_value);  // csrf token
formData.append("works", document.getElementById('file').files[0]); // file
var url = $("#R_batch_upload_url").val();

vm.$http.post(url, formData, {
  progress: (e) => {
    if (e.lengthComputable) {
      var percent = Math.floor(e.loaded/e.total*100);
      if(percent <= 100) {
        $("#J_progress_bar").progress('set progress', percent);
        $("#J_progress_label").html('   ：'+percent+'%');
      }
      if(percent >= 100) {
        $("#J_progress_label").html('      ，     ，   ...');
        $("#J_progress_label").addClass('success');
      }
    }
  }
})
.then((res) => {
  if(res.ok && res.status === 200) {
    window.location.href = window.location.href;
  }
}, (res) => {
  if(res.status === 400) {
      $("#J_progress_label").html('      ，      ');
      $("#J_progress_label").addClass('warning');
      console.log(res);
      vm.errMsg.show = true;
      vm.errMsg.msg = res.body.msg;
      vm.canSend = true;
      // TODO hide the loader dimmer
      $("#J_upload_batch").dimmer("hide");
    } else {
      $("#J_progress_label").html(res.statusText);
      $("#J_progress_label").addClass('warning');
    }
});

七牛雲貯蔵
一部のファイルは大きすぎて、バックグラウンドは7牛にアップロードして、そのアドレスを取得してデータベースに保存する方式を採用して、この方式では、フロントエンドは上の2つの方式XMLHttpRequest jQuery xhrを使って送信要求とアップロードの進度を実現することができて、もしもっと複雑なアップロードデータ処理が必要ならば、7牛が提供したセットJavascript SDKを使って実現することも考えられます.進捗提示だけであれば、七牛JS SDKを導入する必要はありません.
また、アップロードに成功した後、サイトのページにリダイレクトすると、ドメイン間リダイレクトを間違えて報告される可能性があります.
関連リンク

チェン一峰:ファイルアップロードの漸進的な強化

jquery xhr uploadプロパティパッケージ

ファイルアップロードについて

html 5アップロード進捗

を実現

七牛ファイルアップロード303リダイレクト

CORSドメイン間要求

へリダイレクト

七牛クラウドストレージ-Javascript SDK