创建数据库test
<?php // 创建连接 $conn = new mysqli("localhost", "uesename", "password"); // 检测连接 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error);} // 创建数据库 $sql = "CREATE DATABASE test"; if ($conn->query($sql) === TRUE) { echo "数据库创建成功"; } else { echo "Error creating database: " . $conn->error; } $conn->close(); ?>
创建download表,用来记录文件名、保存在文件服务器上的文件名以及下载次数
<?php $SQL = "CREATE TABLE IF NOT EXISTS `downloads` ( `id` int(6) unsigned NOT NULL AUTO_INCREMENT, `filename` varchar(50) NOT NULL, `savename` varchar(50) NOT NULL, `downloads` int(10) unsigned NOT NULL DEFAULT '1', PRIMARY KEY (`id`), UNIQUE KEY `filename` (`filename`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; " ?>
加入测试数据
<?php $SQL = "INSERT INTO `downloads` (`id`, `filename`, `savename`, `downloads`) VALUES (1, '下载测试1.zip', '201611.zip', 1), (2, '我要下载1.jpg', '20160901.jpg', 1), (3, 'Microsoft Office Word 文档.docx', '20130421098547547.docx', 5), (4, 'Microsoft Office Excel 工作表.xlsx', '20130421098543323.xlsx', 12);" ?>
在本地创建files文件夹,放入文件
创建 HTML页面 index.html
<body> <div id="header"> <div id="logo" style="text-align: center"><h2>下载统计</h2></div> </div> <div id="main"> <div id="demo"> <ul class="filelist"> </ul> </div> </div> <div id="footer"> </div> </body>
以下的代码主要设置文件列表展示效果,当然实际项目中可以根据需要设置相应的样式。
在html<head>头部里面的<style>标签中输入各种CSS样式代码
<style> #demo{width:80%;margin:50px auto;padding:10px;border:1px solid #ddd;background-color:#eee;} ul.filelist li{background:url("https://img.php.cn/upload/course/000/000/008/582e53ad28601855.gif") repeat-x center bottom #F5F5F5; border:1px solid #ddd;border-top-color:#fff;list-style:none;position:relative;} ul.filelist li.load{background:url("https://img.php.cn/upload/course/000/000/008/582e5313d54a1210.gif") no-repeat; padding-left:20px; border:none; position:relative; left:150px; top:30px; width:200px} ul.filelist li a{display:block;padding:8px;} ul.filelist li a:hover .download{display:block;} span.download{background-color:#64b126;border:1px solid #4e9416;color:white; display:none;font-size:12px;padding:2px 4px;position:absolute;right:8px; text-decoration:none;text-shadow:0 0 1px #315d0d;top:6px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} span.downcount{color:#999;font-size:10px;padding:3px 5px;position:absolute; margin-left:10px;text-decoration:none;} </style>
conn.php
<?php header("Content-type:text/html;charset=utf-8"); $link = mysqli_connect('localhost','username','password','test'); mysqli_set_charset($link, "utf8"); if(!$link) { die("连接失败:".mysqli_connect_error()); } header("Content-Type: text/html; charset=utf-8"); ?>
filelist.php
<?php require 'conn.php'; $result = mysqli_query($link,"SELECT * FROM downloads"); //返回的记录数 if(mysqli_num_rows($result)){ //mysqli_num_rows() 函数返回结果集中行的数量 while($row=mysqli_fetch_assoc($result)){ $data[] = array( 'id' => $row['id'], 'file' => $row['filename'], 'downloads'=> $row['downloads'] ); } echo json_encode($data); //json_encode—返回一个值的JSON格式 } ?>
download.php
<?php require('conn.php'); $id = (int)$_GET['id']; if(!isset($id) || $id==0) die('参数错误!'); $query = mysqli_query($link,"select * from downloads where id='$id'"); $row = mysqli_fetch_array($query); if(!$row) exit; $filename = iconv('UTF-8','GBK',$row['filename']);//中文名称注意转换编码 $savename = $row['savename']; //实际在服务器上的保存名称 $myfile = 'files/'.$savename; //文件名称 if(file_exists($myfile)){ mysqli_query($link,"update downloads set downloads=downloads+1 where id='$id'"); $file = @fopen($myfile, "r"); header("Content-type: application/octet-stream"); header("Content-Disposition: attachment; filename=" .$filename ); while (!feof($file)) { echo fread($file, 50000); //打开文件最大字节数为50000 } fclose($file); exit; }else{ echo '文件不存在!'; } ?>
注:
iconv函数库能够完成各种字符集间的转换,是php编程中不可缺少的基础函数库。
file_exists() 函数检查文件或目录是否存在。如果指定的文件或目录存在则返回 true,否则返回 false。
fopen() 函数打开文件或者 URL。如果打开失败,本函数返回 FALSE。“r”只读方式打开,将文件指针指向文件头。
feof() 函数检测是否已到达文件末尾 (eof)。
fread() 函数读取文件(可安全用于二进制文件)。
fclose() 函数关闭一个打开文件。
jQuery主要完成两个任务,一是通过Ajax异步读取文件列表并展示,二是响应用户点击事件,将对应的文件下载次数+1。
首先,页面载入完后,通过$.ajax()向后台filelist.php发送一个GET形式的Ajax请求,当filelist.php相应成功后,接收返回的json数据,通过$.each()遍历json数据对象,构造html字符串,并将最终得到的字符串加入到ul.filelist中,形成了demo中的文件列表。
然后,当点击文件下载时,通过live()响应动态加入的列表元素的click事件,将下载次数进行累加。
<script type="text/javascript"> $(function(){ $.ajax({ //异步请求 type: 'GET', url: 'filelist.php', dataType: 'json', cache: false, beforeSend: function(){ $(".filelist").html("<li class='load'>正在载入...</li>"); }, success: function(json){ if(json){ var li = ''; $.each(json,function(index,array){ li = li + '<li><a href="download.php?id='+array['id']+'">'+array['file']+'<span class="downcount" title="下载次数">' +array['downloads']+'</span><span class="download">点击下载</span></a></li>'; }); $(".filelist").html(li); } } }); $('ul.filelist a').live('click',function(){ var count = $('.downcount',this); count.text( parseInt(count.text())+1); }); }); </script>
注:
ajax中的各种参数
type 类型:string 默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。
url 类型:string 默认值: 当前页地址。发送请求的地址。
dataType 类型:string 预期服务器返回的数据类型。这里为"json": 返回 JSON 数据 。
cache 类型:Boolean 默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
beforeSend 类型:Function 发送请求前可修改 XMLHttpRequest 对象的函数。XMLHttpRequest 对象是唯一的参数。
success 类型:Function 请求成功后的回调函数。
live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
index.html 前端页面完整代码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PHP+Mysql+jQuery实现文件下载次数统计</title> <style type="text/css"> #demo{width:80%;margin:50px auto;padding:10px;border:1px solid #ddd;background-color:#eee;} ul.filelist li{background:url("https://img.php.cn/upload/course/000/000/008/582e53ad28601855.gif") repeat-x center bottom #F5F5F5; border:1px solid #ddd;border-top-color:#fff;list-style:none;position:relative;} ul.filelist li.load{background:url("https://img.php.cn/upload/course/000/000/008/582e5313d54a1210.gif") no-repeat; padding-left:20px; border:none; position:relative; left:150px; top:30px; width:200px} ul.filelist li a{display:block;padding:8px;} ul.filelist li a:hover .download{display:block;} span.download{background-color:#64b126;border:1px solid #4e9416;color:white; display:none;font-size:12px;padding:2px 4px;position:absolute;right:8px; text-decoration:none;text-shadow:0 0 1px #315d0d;top:6px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} span.downcount{color:#999;font-size:10px;padding:3px 5px;position:absolute; margin-left:10px;text-decoration:none;} </style> <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ type: 'GET', url: 'filelist.php', dataType: 'json', cache: false, beforeSend: function(){ $(".filelist").html("<li class='load'>正在载入...</li>"); }, success: function(json){ if(json){ var li = ''; $.each(json,function(index,array){ li = li + '<li><a href="download.php?id='+array['id']+'">'+array['file']+'<span class="downcount" title="下载次数">' +array['downloads']+'</span><span class="download">点击下载</span></a></li>'; }); $(".filelist").html(li); } } }); $('ul.filelist a').live('click',function(){ var count = $('.downcount',this); count.text( parseInt(count.text())+1); }); }); </script> </head> <body> <div id="header"> <div id="logo" style="text-align: center"><h2>下载统计</h2></div> </div> <div id="main"> <div id="demo"> <ul class="filelist"> </ul> </div> </div> <div id="footer"> </div> </body> </html>