[jquery]文件上传实现进度条功能

[Cuuube]

HTML中提供了一个进度条组件：

<progress id="uploadprogress" min="0" max="100" :value="progressValue"></progress>
<!--操作value会改变进度条进度-->

【js】在XMLHttpRequest实例中的属性upload有一个事件onprogress可以监听ajax的上传进度：

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (event) {
  if (event.lengthComputable) {
    // event.loaded是目前装载数，event.total是总数
    // 相除得到百分比
    var complete = (event.loaded / event.total * 100 | 0);
    var progress = document.getElementById('uploadprogress');
    progress.value = progress.innerHTML = complete;
  }
};

但是我的项目中使用的是jquery的$.ajax，它自己封装的对象，我并不能接触到。因此搜了一个另外的jquery封装的方法，需要引入一个 插件 ：

// jquery.ajax-progress.js
(function($, window, undefined) {
    //is onprogress supported by browser?
    var hasOnProgress = ("onprogress" in $.ajaxSettings.xhr());
    //If not supported, do nothing
    if (!hasOnProgress) {
        return;
    }
    //patch ajax settings to call a progress callback
    var oldXHR = $.ajaxSettings.xhr;
    $.ajaxSettings.xhr = function() {
        var xhr = oldXHR();
        if (xhr instanceof window.XMLHttpRequest) {
            xhr.addEventListener('progress', this.progress, false);
        }
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', this.progress, false);
        }
        return xhr;
    };
})(jQuery, window);

【jq】将此代码保存进文件，并在HTML中引入该文件，然后就可以在$.ajax中使用progress事件了：

$.ajax({
  //其他略
  progress: function(e) {
    if (e.lengthComputable) {
      // 将数据输入自己的进度条组件
      This.progressValue = (e.loaded / e.total) * 100;
    }
    else {
      console.warn('进度条长度出错!');
    }
  }
});

效果(藏在标题下面一半的蓝条，现在是已经装载完毕的效果)：