創(chuàng)建數(shù)據(jù)庫(kù)test
<?php // 創(chuàng)建連接 $conn = new mysqli("localhost", "uesename", "password"); // 檢測(cè)連接 if ($conn->connect_error) { die("連接失敗: " . $conn->connect_error);} // 創(chuàng)建數(shù)據(jù)庫(kù) $sql = "CREATE DATABASE test"; if ($conn->query($sql) === TRUE) { echo "數(shù)據(jù)庫(kù)創(chuàng)建成功"; } else { echo "Error creating database: " . $conn->error; } $conn->close(); ?>
創(chuàng)建download表,用來(lái)記錄文件名、保存在文件服務(wù)器上的文件名以及下載次數(shù)
<?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; " ?>
加入測(cè)試數(shù)據(jù)
<?php $SQL = "INSERT INTO `downloads` (`id`, `filename`, `savename`, `downloads`) VALUES (1, '下載測(cè)試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);" ?>
在本地創(chuàng)建files文件夾,放入文件
創(chuàng)建 HTML頁(yè)面 index.html
<body> <div id="header"> <div id="logo" style="text-align: center"><h2>下載統(tǒng)計(jì)</h2></div> </div> <div id="main"> <div id="demo"> <ul class="filelist"> </ul> </div> </div> <div id="footer"> </div> </body>
以下的代碼主要設(shè)置文件列表展示效果,當(dāng)然實(shí)際項(xiàng)目中可以根據(jù)需要設(shè)置相應(yīng)的樣式。
在html<head>頭部里面的<style>標(biāo)簽中輸入各種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"); //返回的記錄數(shù) if(mysqli_num_rows($result)){ //mysqli_num_rows() 函數(shù)返回結(jié)果集中行的數(shù)量 while($row=mysqli_fetch_assoc($result)){ $data[] = array( 'id' => $row['id'], 'file' => $row['filename'], 'downloads'=> $row['downloads'] ); } echo json_encode($data); //json_encode—返回一個(gè)值的JSON格式 } ?>
download.php
<?php require('conn.php'); $id = (int)$_GET['id']; if(!isset($id) || $id==0) die('參數(shù)錯(cuò)誤!'); $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']);//中文名稱注意轉(zhuǎn)換編碼 $savename = $row['savename']; //實(shí)際在服務(wù)器上的保存名稱 $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); //打開文件最大字節(jié)數(shù)為50000 } fclose($file); exit; }else{ echo '文件不存在!'; } ?>
注:
iconv函數(shù)庫(kù)能夠完成各種字符集間的轉(zhuǎn)換,是php編程中不可缺少的基礎(chǔ)函數(shù)庫(kù)。
file_exists() 函數(shù)檢查文件或目錄是否存在。如果指定的文件或目錄存在則返回 true,否則返回 false。
fopen() 函數(shù)打開文件或者 URL。如果打開失敗,本函數(shù)返回 FALSE?!皉”只讀方式打開,將文件指針指向文件頭。
feof() 函數(shù)檢測(cè)是否已到達(dá)文件末尾 (eof)。
fread() 函數(shù)讀取文件(可安全用于二進(jìn)制文件)。
fclose() 函數(shù)關(guān)閉一個(gè)打開文件。
jQuery主要完成兩個(gè)任務(wù),一是通過Ajax異步讀取文件列表并展示,二是響應(yīng)用戶點(diǎn)擊事件,將對(duì)應(yīng)的文件下載次數(shù)+1。
首先,頁(yè)面載入完后,通過$.ajax()向后臺(tái)filelist.php發(fā)送一個(gè)GET形式的Ajax請(qǐng)求,當(dāng)filelist.php相應(yīng)成功后,接收返回的json數(shù)據(jù),通過$.each()遍歷json數(shù)據(jù)對(duì)象,構(gòu)造html字符串,并將最終得到的字符串加入到ul.filelist中,形成了demo中的文件列表。
然后,當(dāng)點(diǎn)擊文件下載時(shí),通過live()響應(yīng)動(dòng)態(tài)加入的列表元素的click事件,將下載次數(shù)進(jìn)行累加。
<script type="text/javascript"> $(function(){ $.ajax({ //異步請(qǐng)求 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="下載次數(shù)">' +array['downloads']+'</span><span class="download">點(diǎn)擊下載</span></a></li>'; }); $(".filelist").html(li); } } }); $('ul.filelist a').live('click',function(){ var count = $('.downcount',this); count.text( parseInt(count.text())+1); }); }); </script>
注:
ajax中的各種參數(shù)
type 類型:string 默認(rèn)值: "GET")。請(qǐng)求方式 ("POST" 或 "GET"), 默認(rèn)為 "GET"。
url 類型:string 默認(rèn)值: 當(dāng)前頁(yè)地址。發(fā)送請(qǐng)求的地址。
dataType 類型:string 預(yù)期服務(wù)器返回的數(shù)據(jù)類型。這里為"json": 返回 JSON 數(shù)據(jù) 。
cache 類型:Boolean 默認(rèn)值: true,dataType 為 script 和 jsonp 時(shí)默認(rèn)為 false。設(shè)置為 false 將不緩存此頁(yè)面。
beforeSend 類型:Function 發(fā)送請(qǐng)求前可修改 XMLHttpRequest 對(duì)象的函數(shù)。XMLHttpRequest 對(duì)象是唯一的參數(shù)。
success 類型:Function 請(qǐng)求成功后的回調(diào)函數(shù)。
live() 方法為被選元素附加一個(gè)或多個(gè)事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
index.html 前端頁(yè)面完整代碼
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PHP+Mysql+jQuery實(shí)現(xiàn)文件下載次數(shù)統(tǒng)計(jì)</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="下載次數(shù)">' +array['downloads']+'</span><span class="download">點(diǎn)擊下載</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>下載統(tǒng)計(jì)</h2></div> </div> <div id="main"> <div id="demo"> <ul class="filelist"> </ul> </div> </div> <div id="footer"> </div> </body> </html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)