Question

点击提交后，我会看到一个进度条。
然后，该应用将处理后台任务并更新进度栏。

问题是，如何在进度条达到100％之后显示下载按钮，而不是在进度条开始更新时显示下载按钮？

$('form').on('submit', function(event) {
  event.preventDefault();
  var formData = new FormData(this);
  // add task status elements
  div = $('<div class="progress"><div></div><div>0%</div><div>...</div></div>');
  $('#progress').append(div);
  // progress bar
  var nanobar = new Nanobar({
    bg: '#03adff',
    target: div[0].childNodes[0]
  });
  $.ajax({
    type: 'POST',
    url: '/longtask',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data, status, request) {
      status_url = request.getResponseHeader('Location');
      update_progress(status_url, nanobar, div[0]);
    },
    complete: function() {
      $("#dl").css("display", "block");
    },
    error: function() {
      alert('Unexpected error');
    }
  });
})

function update_progress(status_url, nanobar, status_div) {
  // send GET request to status URL
  $.getJSON(status_url, function(data) {
    percent = parseInt(data['current'] * 100 / data['total']);
    nanobar.go(percent);
    $(status_div.childNodes[1]).text(percent + '%');
    $(status_div.childNodes[2]).text(data['status']);
    if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS') {
      if ('result' in data) {
        // show result
        $(status_div.childNodes[3]).text('Result: ' + data['result']);
      } else {
        // something unexpected happened
        $(status_div.childNodes[3]).text('Result: ' + data['state']);
      }
    } else {
      setTimeout(function() {
        update_progress(status_url, nanobar, status_div);
      }, 1000);
    }
  });
}

Answer 1

假设#dl是您的下载按钮。

您可以将$("#dl").css("display", "block");移至update_progress函数中

$('form').on('submit', function(event) {
  event.preventDefault();
  var formData = new FormData(this);
  // add task status elements
  div = $('<div class="progress"><div></div><div>0%</div><div>...</div></div>');
  $('#progress').append(div);
  // progress bar
  var nanobar = new Nanobar({
    bg: '#03adff',
    target: div[0].childNodes[0]
  });
  $.ajax({
    type: 'POST',
    url: '/longtask',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data, status, request) {
      status_url = request.getResponseHeader('Location');
      update_progress(status_url, nanobar, div[0]);
    },
    error: function() {
      alert('Unexpected error');
    }
  });
})

function update_progress(status_url, nanobar, status_div) {
  // send GET request to status URL
  $.getJSON(status_url, function(data) {
    percent = parseInt(data['current'] * 100 / data['total']);
    nanobar.go(percent);
    $(status_div.childNodes[1]).text(percent + '%');
    $(status_div.childNodes[2]).text(data['status']);
    if (data['state'] != 'PENDING' && data['state'] != 'PROGRESS') {
      if ('result' in data) {
        // Show download button once done
        $("#dl").css("display", "block");
        // show result
        $(status_div.childNodes[3]).text('Result: ' + data['result']);
      } else {
        // something unexpected happened
        $(status_div.childNodes[3]).text('Result: ' + data['state']);
      }
    } else {
      setTimeout(function() {
        update_progress(status_url, nanobar, status_div);
      }, 1000);
    }
  });
}

完全完成之前的ajax执行功能

1 个答案: