Bootstrap 进度条未加载

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

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

StackSnippets 中的演示

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);
  }
};

<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>

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

Here's a Working Demo in Plunker

^{（由于 Access-Control-Allow-Origin，您不能 POST 调用 stacksnippets.net）。}

<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);
    }
  }

})

进一步阅读:

MDN - Using XMLHttpRequest
xhr.upload.onprogress not working in FireFox
xhr.upload.onprogress doesnt work

Bootstrap 进度条未加载

Bootstrap progress bar not loading

html

javascript

twitter-bootstrap

progress-bar

StackSnippets 中的演示

Here's a Working Demo in Plunker