有没有办法让jQuery ajax上传进度？

$.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); //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; }, type: 'POST', url: "/", data: {}, success: function(data){ //Do something success-ish } }); 

这不适用于jQuery 1.5+，因为xhr被jqXHR（即原始XHR的高级版本）所取代。现在的问题是如何让它与jqXHR一起工作……任何人都知道如何做到这一点？

Answer 1

试试这个

 $.ajax({ url: path, xhr: function () { var xhr = $.ajaxSettings.xhr(); xhr.upload.onprogress = function (e) { if (e.lengthComputable) { console.log(e.loaded / e.total); } }; return xhr; } }).done(function (e) { }) 

Answer 2

我制作了一个jquery插件来轻松处理上传或下载进度事件。 使用任何jquery ajax方法，如$ .ajax，$ .get，$ getJSON，$ .post等。您可以从这里下载它： https ： //github.com/cvelazquez/jquery.ajax.progress

 var jqXHR = $.post('www.somedomain.com', {data:"real long data, o maybe a file upload"}, function(response){ /* do anything on finish */ }); $(jqXHR).on('uploading', function(proxyEvent, event){ if (event.lengthComputable) { // You can do anything here console.log("Uploaded " + parseInt( (event.loaded / event.total * 100), 10) + "%"); } }); 

Answer 3

搜索文档和其他问题，似乎有一个插件来监视jquery ajax进度： https ： //github.com/hiddentao/jquery.ajaxprogress