Ajax/진행률 표시 줄이 작동하지 않습니다.

Question

아약스 요청이 끝날 때까지 진행률 표시 줄이 나타납니다 (텍스트 필드 + 노트북 웹캠에서 캡처 한 캔버스 이미지). 그러나 더 내 줄에서 진행이 완료되면 ... 그것은 다음 나타나는, 그것은 사라 만에 아무런 시각적 진행은 ...이

$("#FormSubmitPhotoCapture").click(function (e) { 

     e.preventDefault(); 

     if($("#form_titre_photo_capture").val()==="") 
     { 
      alert("Veuillez saisir un titre"); 
      return false; 
     } 
     var canvas = document.getElementById('canvascapt'); 
     var context = canvas.getContext('2d'); 
       var dataURL = canvas.toDataURL(); 
       document.getElementById('imagecaptimg').src = dataURL; 
     var myData = {titre : $("#form_titre_photo_capture").val(), image_capture : "" + dataURL + ""} 
     jQuery.ajax({ 
       beforeSend:function(x){ 
        $('#progression').html("<progress id='bar' value='0' max='100'></progress>").show(); 
         }, 
      type: "POST", 
      url: "captureimg", 
      dataType:"text", 
      data:myData, 
      success:function(response){ 
      $('#bar').val(100); 
      $("#responds").before(response); 
      $("#form_titre_photo_capture").val(''); 
         $("#webcam_photo_capture").empty(); 
         $('#FormSubmitPhotoCapture').hide(); 
      }, 
      complete: function() { 
         $('#bar').hide(); 
        } 
     }); 
    }); 

어떤 생각하시기 바랍니다입니까?

Answer 1

진행 상황 이벤트를 수신하지 않습니다. This가 작동해야합니다.

$.ajax({ 
    xhr: function() 
    { 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     console.log(percentComplete); 
     } 
    }, false); 
    //Download progress 
    xhr.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     console.log(percentComplete); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/", 
    data: {}, 
    success: function(data){ 
    //Do something success-ish 
    } 
});