Collection
Collection
创建数据库test
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<?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>