如何顯示上傳文件總數的“實時”計數？

Question

我希望顯示數據庫中文件的總數。 為了澄清起見，假設我有一個網站，人們可以在其中上傳自己的汽車圖片，我想實時顯示其中有多少張圖片，那么最好的方法是什么？ Javascript，PHP？ 混合物？ 我設想了一個div，其中的數字表示“ Total Pictures：x”，其中x是實時總數。 我計划使用MySQL將所有數據存儲在網站上。 是否甚至建議與服務器進行如此多的通信？ 有顯示現場號碼的名稱嗎？ 謝謝！

Answer 1

如果您想使用AngularJS方式 ，則可以創建一個Poller服務，該服務每秒輪詢一次（假設/counter.php返回json）：

app.factory('Poller', function($http, $timeout) {
  var data = { response: {}};
  var poller = function() {
    $http.get('/counter.php').then(function(r) {
      data.response = r.data;
      $timeout(poller, 1000);
    });      
  };
  poller();
  return {
    data: data
  };
});

然后您的控制器：

app.controller('CounterCtrl', function(Poller, $scope){
    $scope.counter = Poller.data;
});

最后您認為：

{{counter.response}}

您可以閱讀有關$http更多信息

---

Answer 2

設置一個PHP腳本來查詢數據庫並返回文件上傳總數。 之后，您可以使用頁面上的JavaScript在指定的時間間隔內定期調用服務器，並從PHP腳本中獲取計數數據。 使用jQuery和GET ，您可以執行以下操作：

jQuery(function($){
  setInterval(function(){
    $.get( '/counter.php', function(fileUploadCount){
      $('#counter').html( fileUploadCount );
    });
  },20000); // 20 seconds
});

在您的HTML中：

<p><span id='counter'>xx</span> files have been uploaded so far!</p>

希望這可以幫助！

Answer 3

您希望它過得怎么樣？ 每當有人更新站點時，它就會具有新價值，或者您實際上是否希望它實時更新？

如果是后者，則必須對返回數據庫中文件數量的某種API使用Javascript。 由於您使用的是PHP，因此我無法為您提供幫助，但這應該不太困難。 只是返回一些JSON看起來像

{ fileCount: 45020 }

客戶端，您有一些選擇。 您擁有不同的javascript框架（如AngularJS和EmberJS （還有更多）），以及“普通的” javascript和框架（如jQuery）

關鍵字實際上是AJAX ，即使那只是使用javascript使網站動態化的流行詞。

我很喜歡使用AngularJS，因為它很容易，但是我會盡力為您提供一些使用jQuery的指針。 請注意，我已經多年沒有使用jQuery了。

jQuery方式

jQuery有一個名為jQuery.getJSON（）的函數，根據文檔，您可以使用如下函數：

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "http://example.com/api/fileCount.json")
.done(function(data) { console.log(data) })
.fail(function() { console.log( "error" ); })
.always(function() { console.log( "complete" ); });

因此，這意味着我們可以調用一個端點並使用jQuery獲取一些數據。

這里是一個有關jQuery基礎的教程的鏈接 。

jQuery使我們能夠執行以下操作：

<div id="divTest1"></div>
<script type="text/javascript">
  $("#divTest1").text("Hello, world!");
</script>

執行該操作時，標識為“ divTest1”的div將包含文本“ Hello，world！”。

聽起來我們可以在這里使用！

Javascript也有一個非常好的函數setTimeout（） ，它使我們能夠在以后調用它。

這說明如何將jQuery與setTimeout（）一起使用

如您所見，它還向我們顯示了jQuery.documentReady（） ，這是一個在網站加載完成時觸發的事件，因此是放置我們要執行的代碼的好地方。 下面的示例顯示了如何使用jQuery在3秒后隱藏id = div的div。

jQuery(document).ready(function () {
  setTimeout( "jQuery('#div').hide();",3000 ); //hide a div after 3 seconds
});

結合這些內容，您應該能夠進行重復調用，以從服務器中獲取數據，然后使用已獲取的數據更新div或另一個元素。

只需創建一個使用jQuery.getJSON（）來獲取數據的函數，然后在該函數的底部添加一個setTimeout調用即可在X秒內運行它（無論您希望它多久更新一次）。

在jQuery.documentReady（）中，您在首次加載文檔時調用該函數。

然后在getJSON（）調用的.done（）位中，使用所需的任何html將從服務器獲取的數據添加到div中。 我向您展示了如何使用$（“＃divTest1”）。text（） ，但是還有一個.html（）的作用相同，但是您應該使用它將html添加到元素中。

角度的方法是使用AngularJS的$ http做同樣的事情，但是我不建議您學習AngularJS，除非您對Javascript有更好的了解。

不過，我強烈建議您這樣做。 這是比使用jQuery更好的方法。

您可以在這里閱讀有關AngularJS的信息

我希望這有幫助！