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

【问题标题】：Generating a loading bar / percentage when AJAX image uploadAJAX图片上传时生成加载条/百分比
【发布时间】：2014-12-22 20:13:11
【问题描述】：

我有一个像这样工作的图片上传功能：

$('.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% 的方法。

【问题讨论】：

标签： javascript php jquery ajax progress

【解决方案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;
            },

progressbar 和 progresspercent 是 HTML 中的元素

【讨论】：