knockout.js 显示上传文件进度

Knockout.js 是一个基于 MVVM 架构的 JavaScript 框架，它可以帮助我们实现数据绑定、模板渲染、事件绑定等功能。要显示上传文件的进度，我们可以使用 XMLHttpRequest 对象来发送文件，并使用 Knockout.js 来更新进度条的值。

首先，我们需要定义一个 ViewModel，用来绑定页面上的元素和数据：

function ViewModel() {
  var self = this;

  self.uploadProgress = ko.observable(0);

  self.uploadFile = function() {
    var fileInput = document.getElementById("fileInput");
    var file = fileInput.files[0];

    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(event) {
      if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total * 100;
        self.uploadProgress(percentComplete);
      }
    }, false);
    xhr.open("POST", "/upload");
    xhr.send(file);
  };
}

ko.applyBindings(new ViewModel());

在这个 ViewModel 中，我们定义了一个 uploadProgress 可观察的属性，它用来绑定页面上的进度条。我们还定义了一个 uploadFile 方法，用来上传文件。在上传文件的过程中，我们使用 XMLHttpRequest 的 upload 事件来监听文件上传的进度，如果进度发生变化，我们就更新 uploadProgress 的值，从而更新页面上的进度条。

在 HTML 代码中，我们可以使用 Knockout.js 的数据绑定语法来绑定 uploadProgress 属性，以显示进度条：

<input type="file" id="fileInput">
<button data-bind="click: uploadFile">Upload File</button>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%;" data-bind="style: { width: uploadProgress() + '%' }">
    <span data-bind="text: uploadProgress() + '%'"></span>
  </div>
</div>

在这个 HTML 代码中，我们使用了 Bootstrap 的进度条样式，并使用了 Knockout.js 的数据绑定语法来绑定 uploadProgress 属性。当 uploadProgress 的值发生变化时，进度条的宽度和文本也会相应地更新。

总结一下，要显示上传文件的进度，我们可以使用 XMLHttpRequest 对象来发送文件，并使用 Knockout.js 来更新进度条的值。我们可以定义一个 ViewModel，用来绑定页面上的元素和数据，定义一个 uploadFile 方法，用来上传文件，使用 XMLHttpRequest 的 upload 事件来监听文件上传的进度，如果进度发生变化，就更新 uploadProgress 的值，从而更新页面上的进度条。在 HTML 代码中，我们可以使用 Knockout.js 的数据绑定语法来绑定 uploadProgress 属性，以显示进度条。