javascript - 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 中的元素