javascript - Ajax/进度条不起作用

Question

我试图有一个进度条，直到 ajax 请求结束（这是文本字段 + 从笔记本电脑网络摄像头捕获的画布图像）。但是我的栏没有任何进展......然后出现，当它完成时，它消失了，但没有视觉进展......

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

您没有在监听进度事件。这应该有效：

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