Question

我正在尝试根据文件的上传百分比更新Bootstrap进度条。

我正在使用以下代码：

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var percentComplete = (e.loaded / e.total) * 100;
    console.log(percentComplete + '% uploaded');
    $('.progress-bar').css('width', percentComplete+'%')
                      .attr('aria-valuenow', percentComplete);
  }
};

<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar" id="progress-bar-file" style="width: 0.000001%"  
       aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

然而它不起作用。虽然其他操作确实发生，但进度条不会加载，包括控制台日志记录，文件加载和到达数据库。

有什么想法吗？

Answer 1

更新HTML的JavaScript似乎是正确的。这是一个使用您提供的代码更新进度条的简单示例：

StackSnippets中的演示

＆＃13;

var eventStub = {total: 100, lengthComputable: true}

for (i = 0; i <= eventStub.total; i++) {
  setTimeout(function() {
    eventStub.loaded = i
    updateProgressBar(eventStub)
  },1000);
}

function updateProgressBar(e) {
  if (e.lengthComputable) {
    var percentComplete = (e.loaded / e.total) * 100;
    console.log(percentComplete + '% uploaded');
    $('.progress-bar').css('width', percentComplete+'%')
                      .attr('aria-valuenow', percentComplete);
  }
};

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>

<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar" id="progress-bar-file" style="width: 0.000001%"  
       aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

＆＃13;

可能影响您的请求的一件事是，在您已经调用open或send之后附加了XHR侦听器。尝试提前设置这些听众。

Here's a Working Demo in Plunker

^{（由于Access-Control-Allow-Origin，您无法对stacksnippets.net进行POST调用。）}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<input type="file" id="fileInput" />
<input type="button" value="Upload" id="uploadBtn" />
<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar" id="progress-bar-file" style="width: 0.000001%"  
       aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

$(function() {

  $('#uploadBtn').click(function() {
    var file = document.getElementById("fileInput").files[0];
    var xhr = new XMLHttpRequest();

    // attach listeners before posting
    xhr.upload.onprogress = updateProgressBar;

    xhr.open('POST', './test.php', true);
    xhr.send(file);

  });

  function updateProgressBar(e) {
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded', e);
      $('.progress-bar').css('width', percentComplete + '%')
                        .attr('aria-valuenow', percentComplete);
    }
  }

})

进一步阅读：

Bootstrap进度条未加载

1 个答案:

StackSnippets中的演示

Here's a Working Demo in Plunker