Ajax /进度条不起作用

Question

I'm trying to have a progress bar until ajax request has ended (this is text field + a canvas image captured from laptop webcam). But there is no progress on my bar... It appears then, when it finished, it disappear, but no visual progression on...

 $("#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();
                    }
        });
    });

Any idea please?

Answer 1

You're not listening for progress events. This should work:

$.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
  }
});