如何将下载计数器附加到我的 HTML 下载按钮

Question

我是一个新手设计师，可以使用HTML来设计我自己的网站，我已经上传了我的电子杂志文件。这是我计划在我的网站上下载的页面：http://www.aamaodisha.org/secdownload.html

如您所见，在此下载页面上，我放置了我的电子杂志的6个版本的图像，并为每个版本连接了下载按钮，因此每当用户单击下载按钮时，该特定文件（.RAR文件）将开始下载。就像我说的，我用纯HTML和CSS设计了这些按钮。

我想要的是每个杂志版本的下载计数器，附在特定的下载按钮上 - 这意味着就像你可以在我的HTML页面上看到的那样，每个版本下面要写的下载次数。怎么会有这样的东西？我可以对 html 进行这种安排吗？

6 个下载按钮的 HTML 代码：

<div class="button button1">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.54 MB .RAR</p>
</div>
<div class="button button2">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.8 MB .RAR</p>
</div>
<div class="button button3">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.05 MB .RAR</p>
</div>
<div class="button button4">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">3.8 MB .RAR</p>
</div>
<div class="button button5">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.5 MB .RAR</p>
</div>
<div class="button button6">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">8 MB .RAR</p>
</div>

这是按钮的 CSS：

.button {
  width: 115px;
}
.button1 {
    position:absolute;
    left:430px;
    top:410px;
}    
.button2 {
    position:absolute;
    left:632px;
    top:410px;
}  
.button3 {
    position:absolute;
    left:833px;
    top:410px;
}    
.button4 {
    position:absolute;
    left:430px;
    top:636px;
}    
.button5 {
    position:absolute;
    left:632px;
    top:636px;
}   
.button6 {
    position:absolute;
    left:833px;
    top:636px;
}   
.button a {
  display: block;
  height: 28px;
  width: 115px;
  /*TYPE*/
  color: white;
  font: bold 11px/28px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase; 
  /*GRADIENT*/  
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button a, p {
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.button p {
  background: #222;
  display: block;
  height: 25px;
  width: 105px;
  margin: -27px 0 0 5px;
  /*TYPE*/
  text-align: center;
  font: bold 10px/28px Helvetica, Verdana, sans-serif;
  color: #ffffff;
  /*POSITION*/
  position: absolute;
  z-index: -1;
  /*TRANSITION*/  
  -webkit-transition: margin 0.4s ease;
     -moz-transition: margin 0.4s ease;
       -o-transition: margin 0.4s ease;
      -ms-transition: margin 0.4s ease;
          transition: margin 0.4s ease;
}
/*HOVER*/
.button:hover .bottom {
  margin: -4px 0 0 5px;
}
.button:hover .top {
  margin: -50px 0 0 5px;
  line-height: 22px;
}
/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.button:active .bottom {
  margin: -14px 0 0 5px;
}
.button:active .top {
  margin: -30px 0 0 5px;
}

我还有另一个疑问：我在谷歌上搜索了下载计数器，并在某处读到，而不是直接在 href 中给出我的杂志文件的真实路径，而应该通过另一个 php 文件给出替代路径即我目前有这个带有下载按钮的 HTML 代码

<div class="button button1">
      <a href="#my link">Download</a>
      <p class="top">Click to begin</p>
      <p class="bottom">7.54 MB .RAR</p>
</div>

我应该有类似<a href="/download.php file=my link">Download</a>的东西吗？

请帮助我实现这些下载按钮的计数器。我将义不容辞。谢谢。问候

Answer 1

我会在下载链接上选择一个jQuery事件侦听器，并通过PHP在服务器端完成所有工作。它可能不是万无一失的，但它对用户的影响不大。

如果你想做这样的事情，那么你首先需要以一种可以通过jQuery访问的方式对按钮进行分组;还有其他方法可以在jQuery中选择多个元素，但最简单的方法是使它们成为特定类的所有成员。

然后，您可以使用 .each（） 函数遍历该类。所以对于页面的初始化;即让所有页面内容正常工作;你需要遍历每个按钮，并向 PHP 脚本发出 post 请求;所有需要发送到 PHP 脚本的只是下载的 ID。这在下面代码的第 1 部分中完成。

第 2 部分是为下载发生时设置事件侦听器。再一次，只需在整个类上放置一个事件侦听器，我们就可以检测到对其中任何一个的点击;（注意：为简单起见;使标记中的 id 与数据库中的 id 相同）

然后，这会向 php 脚本发出另一个 post 请求;但提供了一个额外的参数 - "download"。实际上，与下载相对应的值实际上并不重要;因为这种情况非常简单，用户要么下载它，要么不下载它。因此，在代码的PHP段（下面稍后）中，我们甚至不检查它的值;我们只是检查它是否存在。

$(document).ready(function(){
  /* [[PART 1]]: loop through every element in the .button class*/
  $(".button").each(function (e) {
    /* get it's ID (which is equal to the download id stored in the db */
    var id = e.target.id;
    /* Post the download id to ranking.php; then echo the returned value to an 
    ** element with the id of 'count<num>'; where num is the download id. */
    $.post( 'ranking.php', { 'id' : id }, function(data){
        $('#count' + id).html(data);
    });
  });
  /* Part 2: When button is clicked, post the download data to "ranking.php" */
  $('.button').click(function(event){
      var id = e.target.id; //get the id of the button
      $.post( 'ranking.php', { 'id' : event.target.id, 'download' : 'YES' },  //set 'download'
          function(){ $('#count' + id).html(data) });   //echo new value to html
  });
});

我建议jQuery，因为它提供了足够的语法糖使事情变得非常简单。此外，通过使用jQuery - 如果你愿意的话，你将为未来打开许多可能性的大门。

服务器端是PHP接管的地方。实际上，这一切需要做的是检查是否设置了"下载"，并回显下载次数。（如果设置了"下载"参数，则显然会随着数据库增加数字）

这可以通过类似的东西来实现...

<?php
    mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die( "Unable to select database");   
    if(! isset($_POST['id']) {
         //die error!
    }
    /* if $_POST['download'] isn't set, then just get the current download number
       and echo it back to the browser */
    if(! isset($_POST['download'] ){
        $query = sprintf('SELECT * FROM dl_table WHERE id = %d', $_POST['id']);
        mysql_query($query);
    print mysql_result($query, 0, 'download');
        exit; // no need to carry on, our job is done..
    }
    /* if the script reaches here then $_POST['download'] is set, so you need to log a 
    ** new download */
    $query = //generate query to increment the database field
?>

上面的示例适用于简单情况（显然更正了数据库函数），但显然 - 这可能不是有效的代码，因为我在晚餐时确实输入了它！当然，这只是为了让您了解可能的解决方案。（如果您决定做类似的事情，我已经展示了不好的做法 - mysql 操作最好现在使用 mysqli* 函数或 PDO 来完成）

查找 PHP My SQL 文档;希望这为您指明了正确的方向。

现在或者，我知道你不太热衷于jQuery（一旦你进入它就太好了！）你与jQuery解决方案一起使用的PHP脚本可以单独使用。只需将 $_POST[] 更改为 $_GET[]，并且正如其他答案所说，使用诸如"rank.php？id="之类的 URL;但是，您需要考虑在数据库查询完成后让 PHP 脚本传递文件。

它还留下了一个关于下载号显示的问题;因为没有AJAX，你必须在HTML标记中嵌入一些PHP。我希望我已经编辑了它以使其更有意义，并为您提供了另一个选项的概述！:)

Answer 2

只有HTML和CSS，跟踪下载是不可能的。您需要（理想情况下）依靠PHP和某种类型的数据库的组合来跟踪这一点。一种选择是通过 PHP 文件传递要下载的文件，但如果您希望避免这样做，您还可以让链接触发 ajax 请求，每次单击链接时也会将计数器增加 1。

Answer 3

我建议查看下面的链接：

http://www.kavoir.com/2010/05/simplest-php-hit-counter-or-download-counter-count-the-number-of-times-of-access-visits-or-downloads.html

如@johnmadrak所述，如果没有某种强调某种数据库的服务器端脚本语言，则无法显示页面被查看的次数或下载文件。在某些情况下，您甚至可以通过文本文档放置文件的下载次数，然后通过 PHP 加载内容。