创建数据库test
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?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表,用来记录文件名、保存在文件服务器上的文件名以及下载次数
1 2 3 4 5 6 7 8 9 10 | <?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; " ?> |
加入测试数据
1 2 3 4 5 6 7 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 | < 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样式代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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
1 2 3 4 5 6 7 8 9 10 11 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?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事件,将下载次数进行累加。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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 前端页面完整代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!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> |