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

【如何使用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 progressxhr.upload.addEventListener("progress", function(evt){if (evt.lengthComputable) {var percentComplete = evt.loaded / evt.total; //Do something with upload progressconsole.log(percentComplete); }}, false); //Download progressxhr.addEventListener("progress", function(evt){if (evt.lengthComputable) {var percentComplete = evt.loaded / evt.total; //Do something with download progressconsole.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 progressXMLHttpRequest.upload.addEventListener("progress", function(evt){if (evt.lengthComputable) {var percentComplete = evt.loaded / evt.total; //Do something with upload progress}}, false); //Download progressXMLHttpRequest.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回调上的第一个参数检索。