用jQuery实现文件上传进度条

我正在尝试在我的项目中实现 AJAX 文件上传功能。我为此使用 jQuery；我的代码使用 AJAX 提交数据。我还想实现一个文件上传进度条。我怎样才能做到这一点？有什么方法可以计算已上传的数量，以便我可以计算上传的百分比并创建进度条？

我只用 jQuery 完成了这个：

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();

    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        percentComplete = parseInt(percentComplete * 100);
        console.log(percentComplete);

        if (percentComplete === 100) {

        }

      }
    }, false);

    return xhr;
  },
  url: posturlfile,
  type: "POST",
  data: JSON.stringify(fileuploaddata),
  contentType: "application/json",
  dataType: "json",
  success: function(result) {
    console.log(result);
  }
});