如何使用jQuery AJAX获得上载或下载的进度

尽管某些浏览器在屏幕的右下角显示进度, 但是你可能希望检索这些值并在项目中使用它们, 以向用户显示使用自己的UI进行下载或上传的进度。

为了使用ajax检索上载或下载(请求)的进度, 我们需要操作文档中的全局xhr(XMLHttpRequest)对象。

如果我们不使用jQuery(vanillaJS), 则该算法非常简单易懂：

function updateProgress(evt){
  if (evt.lengthComputable){
     var percentComplete = (evt.loaded / evt.total)*100;  
      console.log(percentComplete+"% completed");
   } 
}

var request = new XMLHttpRequest(); 
request.onprogress=updateProgress;

onprogress事件将触发请求的updateProgress函数(下载和上传事件)

但是, 如果我们使用jQuery, 则需要使用可以在ajax结构中设置的xhr选项：

$.ajax({
    xhr: function(){
       var xhr = new window.XMLHttpRequest();
         // Handle progress
         //Upload progress
       xhr.upload.addEventListener("progress", function(evt){
           if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              //Do something with upload progress
              console.log(percentComplete);
           }
       }, false);
       //Download progress
       xhr.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              //Do something with download progress
              console.log(percentComplete);
            }
       }, false);

       return xhr;
    }, complete:function(){
        console.log("Request finished.");
    }
});

ProgressEvent.lengthComputable只读属性是一个布尔型标志, 指示资源是否具有可以计算的长度。如果不是, ProgressEvent.total属性将没有重大价值, 并且我们无法检索流程的进度, 在两种情况下, 都可以轻松地检索进度。

较旧的jQuery版本

如果你使用的是jQuery <= 1.5, 则可能要使用以下代码, 因为这些版本不支持xhr属性。

$.ajax({
    type: 'POST', url: "/", data: {}, beforeSend: function(XMLHttpRequest){
        //Upload progress
        XMLHttpRequest.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {  
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress
            }
        }, false); 
        //Download progress
        XMLHttpRequest.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {  
                var percentComplete = evt.loaded / evt.total;
                //Do something with download progress
            }
        }, false); 
    }, success: function(data){
        //Do something success-ish
    }
});

侦听器将直接附加到XMLHttpRequest对象, 该对象作为$ .ajax调用的beforeSend回调上的第一个参数检索。