可以使用xhrFields将onprogressfunction添加到jQuery.ajax（）吗？
正如这里建议的那样： https ： //gist.github.com/HenrikJoreteg/2502497 ，我正在尝试将onprogressfunction添加到我的jQuery.ajax()文件上传中。 上传工作正常，并且onprogress事件正在触发，但不是我预期的 – 而不是在某个时间间隔重复触发，它只在上传完成时触发一次。 有没有办法指定onprogress刷新的频率？ 或者，我是否正在尝试做一些无法做到的事情？ 这是我的代码：
$.ajax( { async: true, contentType: file.type, data: file, dataType: 'xml', processData: false, success: function(xml) { // Do stuff with the returned xml }, type: 'post', url: '/fileuploader/' + file.name, xhrFields: { onprogress: function(progress) { var percentage = Math.floor((progress.total / progress.totalSize) * 100); console.log('progress', percentage); if (percentage === 100) { console.log('DONE!'); } } } });
简短回答：
不，你不能用xhrFields做你想做的事。
答案很长：
XmlHttpRequest对象中有两个进度事件：
-
响应进度 （
XmlHttpRequest.onprogress）
这是浏览器从服务器下载数据的时候。 -
请求进度 （
XmlHttpRequest.upload.onprogress）
这是浏览器将数据发送到服务器时（包括POST参数，cookie和文件）
在您的代码中，您正在使用响应进度事件，但您需要的是请求进度事件。 这是你如何做到的：
$.ajax({ async: true, contentType: file.type, data: file, dataType: 'xml', processData: false, success: function(xml){ // Do stuff with the returned xml }, type: 'post', url: '/fileuploader/' + file.name, xhr: function(){ // get the native XmlHttpRequest object var xhr = $.ajaxSettings.xhr() ; // set the onprogress event handler xhr.upload.onprogress = function(evt){ console.log('progress', evt.loaded/evt.total*100) } ; // set the onload event handler xhr.upload.onload = function(){ console.log('DONE!') } ; // return the customized object return xhr ; } });
xhr选项参数必须是返回本机XmlHttpRequest对象以供jQuery使用的函数。
您需要在发送之前向请求本身添加事件处理程序。 jQuery.ajax允许通过’beforeSend’属性http://api.jquery.com/jQuery.ajax/
例如： http ： //www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
*编辑*确保查看该示例链接的第二个代码示例。 我相信第一个与现代版本的jQuery已经过时了。
$.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 } });
这是Stack Overflow其他地方的另一个答案，但我想回答你的问题。 我已经根据自己的需要对服务器中的“流式”数据进行了抽样调整到可滚动的div（我可以强制它总是滚动到底部，从而显示随时间推移的进度，因此不会等待整个记录集完成） 。
下面的客户端代码将结果内容添加到id为“scrollable_area”的预定义div中（然后可以滚动）…
服务器端 “your_api_call.php”文件调用然后需要刷新其输出（每个数据行以便随时查看进度），然后可以立即显示在上面的“scrollable_area”div中…
// Do Db loop while ($record = $recordset->fetch(PDO::FETCH_ASSOC)) { set_time_limit(10); // Don't timeout on large data sets seeing as this is a big task that we are wanting to watch progress! echo 'Do what you gotta do... ' . $record["register_id"] . '
'; flush(); // Push to the client / ajax ob_flush(); // As above }
简短回答……是的。 希望这可以帮助 ：-）