上传AJAX图片时生成加载条/百分比

Question

我有一个图像上传功能，如下所示：

$('.update-insertimage-form').submit(function() {
$(".submit-newupdate-btn").addClass('disabled');
var rootAsset = $('.rootAsset').html();
var formData = new FormData($('.update-insertimage-form')[0]);
$.ajax({
    url: rootAsset+'saveUploadedImage',
    type: 'post',
    cache: false,
    dataType: 'json',
    data: formData,
    processData: false,
    contentType: false,
    beforeSend: function() {
      $(".form-control-addupdate").append('<div class="uploading-overlay">Uploading Image...</div>');
      $(".uploading-overlay").fadeIn();
    },
    success: function(data) {
      $(".submit-newupdate-btn").removeClass('disabled');
      if(data.errors) {
        $('.modal-body').append('<div class="alert alert-danger centre-text modal-error-message" role="alert"><strong>Error!</strong> '+ data.errors +'</div>');
      } else if (data.success) {
        $(".form-control-addupdate").append('<img class="temp_added_image" src="/public_html/user_uploads/build_images/'+data.name+'.jpeg"><br><br>');
        $(".uploading-overlay").fadeOut(function(){
          $(".uploading-overlay").remove();
        });
        var $t = $('.form-control-addupdate');
        $t.animate({"scrollTop": $('.form-control-addupdate')[0].scrollHeight}, "slow");
      }
    },
    error: function(xhr, textStatus, thrownError) {
        alert('Something went to wrong.Please Try again later...');
    }
});
return false;
});

我不仅要向用户显示百分比，还是要显示加载栏等，而不是“上传图像”。我搜索了周围但找不到太多信息。 到目前为止，我的想法是跟踪何时进行ajax调用，然后何时返回成功回调。 但是不知道如何生成加载百分比等。

我宁愿使用与加载栏相对应的百分比数字，并且只要它增加并在上载图像时以100％完成，它就可以是“伪”数字。

谢谢！

编辑：为了明确起见，我不需要一个具体的实际百分比。 从发出呼叫的那一刻开始，直到收到它，只是从1％到100％的增加。

Answer 1

您需要在AJAX请求中包括xhr选项，并添加一个事件监听器以跟踪请求的进度：

xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.addEventListener('progress', function(e) {
                     $('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%');
                     $('.progresspercent').text((100 * e.loaded / e.total) + '%');
                });
                return xhr;
            },

进度条和进度百分比是HTML中的元素