CodeIgniter和进度条

Question

我在我的模型中有几个方法，这些方法由我的控制器调用。在客户端上，我想在模型方法运行时更新进度条。

如何与控制器进行通信以获得其进展？

Answer 1

因为PHP是服务器端，所以您不能使用PHP来完成此任务，并且在完成其工作后，结果会发送到浏览器。

您可以使用JavaScript，使AJAX调用（google一下，它是一种方法，使调用服务器，而无需重新加载页面）每次和模型的方法完成，你可以添加“正在载入”你的进步酒吧使用JS。但真的在PHP中没有办法知道有多少操作已完成

Answer 2

有些方法可以通过Apache和NGINX上传文件来完成此操作，但这不适用于您的情况。

这样做的一种方法是使用AJAX长轮询来监视控制器的特殊控制器或方法，以在前端发生更改时查找更新和更新。

Answer 3

确实需要AJAX /长轮询来完成这项工作。这里是XMLHttpRequest2。对我来说，这已经使网络达到了一个新的水平。它是我们使用它的时间。我用它与jQuery。可能更容易理解我所做的事情。可能需要一些调整才能使其工作。这里它去..

$.ajax({ 
type: 'POST/GET', 
url: "link/to/controller/method", 
data: {whatever = 'foo'}, 
beforeSend: function(XMLHttpRequest) 
{ 
    //Upload progress 
    XMLHttpRequest.upload.addEventListener("progress", function(evt){ 
    if (evt.lengthComputable) { 
    var percentComplete = evt.loaded/evt.total; 
    $(".jquery-uploadbar-selector").progressbar({ value: percentComplete }); //jquery progress bar for upload 
    //incase you wanted an upload bar 
    } 
}, false); 
//Download progress 
XMLHttpRequest.addEventListener("progress", function(evt){ 
    if (evt.lengthComputable) { 
    var percentComplete = evt.loaded/evt.total; 
    $(".jquery-downloadbar-selector").progressbar({ value: percentComplete }); 
    //jquery progress bar for download or in other words The real answer for question 
    } 
}, false); 
}, 
success: function(data){ 
    //Here goes the end of what you have done.. I would just type.. 
    console.log('Yay!! I guess, I ve answered my first bounty question and hoping to see it work well.'); 
} 
}); 

希望它的作品..让我知道如果我错了某处。

Answer 4

1. 有HTTP连接与客户端开放的（用户），当您启动作业发送数据（isWaiting = 1），以你的客户或做作为ASIQ说AJAX轮询和获取isWaiting状态。
2. HTML客户端页，JavaScript的上加载具有这种体内标签

<div class="overlay" style="display:none;"></div> 

和CSS

isWaiting = 1

html页面时进度条。叠加{宽度：100％;高度：100％;的z-index：5000; left：0;/IE/top：0; text-align：center;位置是：固定; background：url（'https://memberschemes.rics.org/MembersPortal/images/ajax_loader-2.gif'）无重复固定中心; background-color：#EFEFEF; 不透明度：0.7; /* 背景：＃F4F4F4; background-repeat：no-repeat; background-position：center; */ }