xhr.upload.onprogressが機能しない

Question

xhr.upload.onprogressイベントを発生させない点を除いて、次のコードのすべてが機能します。

$(function(){ 

    var xhr; 

    $("#submit").click(function(){ 
     var formData = new FormData(); 
     formData.append("myFile", document.getElementById("myFileField").files[0]); 
     xhr = new XMLHttpRequest(); 
     xhr.open("POST", "./test.php", true); 
     xhr.send(formData); 

     xhr.onreadystatechange = function(){ 
      if(xhr.readyState === 4 && xhr.status === 200){ 
       console.log(xhr.responseText);    
      } 
     } 

     xhr.upload.onprogress = function(e) { 
      // it will never come inside here 
     } 
    }); 
}); 

Answer 1

あなたはこのように、接続を開く前にリスナーを作成する必要があります。

$(function(){ 

    var xhr; 

    $("#submit").click(function(){ 
     var formData = new FormData(); 
     formData.append("myFile", document.getElementById("myFileField").files[0]); 
     xhr = new XMLHttpRequest(); 

     xhr.onreadystatechange = function(){ 
      if(xhr.readyState === 4 && xhr.status === 200){ 
       console.log(xhr.responseText);    
      } 
     } 

     xhr.upload.onprogress = function(e) { 
      // it will never come inside here 
     } 

     xhr.open("POST", "./test.php", true); 
     xhr.send(formData); 
    }); 
}); 

お役に立てば幸いです。