效果圖
首先是封裝好的圖片類（縮放及生成水印）
GDBasic.php
<?php
/**
* GDBasic.php
* description GD基礎類
*/
namespace test\Lib;
class GDBasic
{
protected static $_check =false;
//檢查服務器環境中gd庫
public static function check()
{
//當靜態變量不爲false
if(static::$_check)
{
return true;
}
//檢查gd庫是否加載
if(!function_exists("gd_info"))
{
throw new \Exception('GD is not exists');
}
//檢查gd庫版本
$version = '';
$info = gd_info();
if(preg_match("/\\d+\\.\\d+(?:\\.\\d+)?/", $info["GD Version"], $matches))
{
$version = $matches[0];
}
//當gd庫版本小於2.0.1
if(!version_compare($version,'2.0.1','>='))
{
throw new \Exception("GD requires GD version '2.0.1' or greater, you have " . $version);
}
self::$_check = true;
return self::$_check;
}
}
Image.php
<?php
/**
* Image.php
* description 圖像類
*/
namespace test\Lib;
require_once 'GDBasic.php';
class Image extends GDBasic
{
protected $_width;
protected $_height;
protected $_im;
protected $_type;
protected $_mime;
protected $_real_path;
public function __construct($file)
{
//檢查GD庫
self::check();
$imageInfo = $this->createImageByFile($file);
$this->_width = $imageInfo['width'];
$this->_height = $imageInfo['height'];
$this->_im = $imageInfo['im'];
$this->_type = $imageInfo['type'];
$this->_real_path = $imageInfo['real_path'];
$this->_mime = $imageInfo['mime'];
}
/**
* 根據文件創建圖像
* @param $file
* @return array
* @throws \Exception
*/
public function createImageByFile($file)
{
//檢查文件是否存在
if(!file_exists($file))
{
throw new \Exception('file is not exits');
}
//獲取圖像信息
$imageInfo = getimagesize($file);
$realPath = realpath($file);
if(!$imageInfo)
{
throw new \Exception('file is not image file');
}
switch($imageInfo[2])
{
case IMAGETYPE_GIF:
$im = imagecreatefromgif($file);
break;
case IMAGETYPE_JPEG:
$im = imagecreatefromjpeg($file);
break;
case IMAGETYPE_PNG:
$im = imagecreatefrompng($file);
break;
default:
throw new \Exception('image file must be png,jpeg,gif');
}
return array(
'width' => $imageInfo[0],
'height' => $imageInfo[1],
'type' => $imageInfo[2],
'mime' => $imageInfo['mime'],
'im' => $im,
'real_path' => $realPath,
);
}
/**
* 縮略圖
* @param int $width 縮略圖高度
* @param int $height 縮略圖寬度
* @return $this
* @throws \Exception
*/
public function resize($width, $height)
{
if(!is_numeric($width) || !is_numeric($height))
{
throw new \Exception('image width or height must be number');
}
//根據傳參的寬高獲取最終圖像的寬高
$srcW = $this->_width;
$srcH = $this->_height;
if($width <= 0 || $height <= 0)
{
$desW = $srcW;//縮略圖高度
$desH = $srcH;//縮略圖寬度
}
else
{
$srcP = $srcW / $srcH;//寬高比
$desP = $width / $height;
if($width > $srcW)
{
if($height > $srcH)
{
$desW = $srcW;
$desH = $srcH;
}
else
{
$desH = $height;
$desW = round($desH * $srcP);
}
}
else
{
if($desP > $srcP)
{
$desW = $width;
$desH = round($desW / $srcP);
}
else
{
$desH = $height;
$desW = round($desH * $srcP);
}
}
}
//PHP版本小於5.5
if(version_compare(PHP_VERSION, '5.5.0', '<'))
{
$desIm = imagecreatetruecolor($desW, $desH);
if(imagecopyresampled($desIm, $this->_im, 0, 0, 0, 0, $desW, $desH, $srcW, $srcH))
{
imagedestroy($this->_im);
$this->_im = $desIm;
$this->_width = imagesx($this->_im);
$this->_height = imagesy($this->_im);
}
}
else
{
if($desIm = imagescale($this->_im, $desW, $desH))
{
$this->_im = $desIm;
$this->_width = imagesx($this->_im);
$this->_height = imagesy($this->_im);
}
}
return $this;
}
/**
* 根據百分比生成縮略圖
* @param int $percent 1-100
* @return Image
* @throws \Exception
*/
public function resizeByPercent($percent)
{
if(intval($percent) <= 0)
{
throw new \Exception('percent must be gt 0');
}
$percent = intval($percent) > 100 ? 100 : intval($percent);
$percent = $percent / 100;
$desW = $this->_width * $percent;
$desH = $this->_height * $percent;
return $this->resize($desW, $desH);
}
/**
* 圖像旋轉
* @param $degree
* @return $this
*/
public function rotate($degree)
{
$degree = 360 - intval($degree);
$back = imagecolorallocatealpha($this->_im,0,0,0,127);
$im = imagerotate($this->_im,$degree,$back,1);
imagesavealpha($im,true);
imagedestroy($this->_im);
$this->_im = $im;
$this->_width = imagesx($this->_im);
$this->_height = imagesy($this->_im);
return $this;
}
/**
* 生成水印
* @param file $water 水印圖片
* @param int $pct 透明度
* @return $this
*/
public function waterMask($water ='',$pct = 60 )
{
//根據水印圖像文件生成圖像資源
$waterInfo = $this->createImageByFile($water);
imagecopymerge();
//銷燬$this->_im
$this->_im = $waterInfo['im'];
$this->_width = imagesx($this->_im);
$this->_height = imagesy($this->_im);
return $this;
}
/**
* 圖片輸出
* @return bool
*/
public function show()
{
header('Content-Type:' . $this->_mime);
if($this->_type == 1)
{
imagegif($this->_im);
return true;
}
if($this->_type == 2)
{
imagejpeg($this->_im, null, 80);
return true;
}
if($this->_type == 3)
{
imagepng($this->_im);
return true;
}
}
/**
* 保存圖像文件
* @param $file
* @param null $quality
* @return bool
* @throws \Exception
*/
public function save($file, $quality = null)
{
//獲取保存目的文件的擴展名
$ext = pathinfo($file, PATHINFO_EXTENSION);
$ext = strtolower($ext);
if(!$ext || !in_array($ext, array('jpg', 'jpeg', 'gif', 'png')))
{
throw new \Exception('image save file must be jpg ,png,gif');
}
if($ext === 'gif')
{
imagegif($this->_im, $file);
return true;
}
if($ext === 'jpeg' || $ext === 'jpg')
{
if($quality > 0)
{
if($quality < 1)
{
$quality = 1;
}
if($quality > 100)
{
$quality = 100;
}
imagejpeg($this->_im, $file, $quality);
}
else
{
imagejpeg($this->_im, $file);
}
return true;
}
if($ext === 'png')
{
imagepng($this->_im, $file);
return true;
}
}
}
style樣式不是重點，先不放了
然後是ajax類封裝的文件 ajax.js
let $ = new class {
constructor()
{
this.xhr = new XMLHttpRequest();
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4 && this.xhr.status == 200) {
// process response text
let response = this.xhr.responseText;
if (this.type == "json") {
response = JSON.parse(response);
}
this.callback(response);
}
}
}
get(url, parameters, callback, type = "text")
{
// url = test.php?username=zhangsan&age=20
// parameters = {"username": "zhangsan", "age": 20}
let data = this.parseParameters(parameters);
if (data.length > 0) {
url += "?" + data;
}
this.type = type;
this.callback = callback;
this.xhr.open("GET", url, true);
this.xhr.send();
}
post(url, parameters, callback, type = "text")
{
let data = this.parseParameters(parameters);
this.type = type;
this.callback = callback;
this.xhr.open("POST", url, true);
this.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
this.xhr.send(data);
}
parseParameters(parameters)
{
// username=zhangsan&age=20
let buildStr = "";
for (let key in parameters) {
let str = key + "=" + parameters[key];
buildStr += str + "&";
}
return buildStr.substring(0, buildStr.length - 1);
}
};
首頁文件index.php
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>文件上傳和下載</title>
<!-- Bootstrap -->
<link href="style/css/bootstrap.min.css" rel="stylesheet">
<link href="style/css/site.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.projects .thumbnail .caption {
height: auto;
max-width: auto;
}
.image{
margin:10px auto;
border-radius:5px;
overflow:hidden;
border:1px solid #CCC;
}
.image .caption P{
text-align: center;
}
</style>
</head>
<body>
<!--導航欄-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm" href="" οnclick="_hmt.push(['_trackEvent', 'navbar', 'click', 'navbar-首頁'])">XX網</a>
</div>
<div class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="hidden-sm hidden-md">
<a href="" target="_blank"></a>
</li>
<li>
<a href="" target="_blank"></a>
</li>
</ul>
</div>
</div>
</div>
<!--導航欄結束-->
<!--巨幕-->
<div class="jumbotron masthead">
<div class="container">
<h1>文件上傳下載</h1>
<h2>實現文件的上傳和下載功能</h2>
<p class="masthead-button-links">
<form class="form-inline" οnsubmit="return false;">
<div class="form-group">
<input type="search" class="form-control keywords" id="exampleInputName2" placeholder="輸入搜索內容" name="keywords" value="">
<button class="btn btn-default searchBtn" type="submit">搜索</button>
<button type="button" class="btn btn-primary btn-default" data-toggle="modal" data-target="#myModal"> 上傳 </button>
</div>
</form>
</p>
</div>
</div>
<!--巨幕結束-->
<!-- 模態框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form class="form-inline" action="upload_class.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="10240000" />
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">上傳圖片</h4>
</div>
<div class="modal-body">
<p>選擇圖片：</p><input type="file" id="image" name="test_pic[]">
<br/>
<p>圖片描述：</p><textarea class="form-control" cols="75" name="description" id="info"></textarea>
<br/><br/>
<p>
是否添加水印：
<select name="mark">
<option value="1">添加</option>
<option value="0">不添加</option>
</select>
</p>
<br/>
<p>
圖片寬度比例：
<select name="scale">
<option value="800*600">800*600</option>
<option value="600*450">600*450</option>
<option value="400*300">400*300</option>
</select>
</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" name="submit" id="submit" οnclick="show(this)">上傳</button>
<button type="reset" class="btn btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<!--模態框結束-->
<div class="container projects">
<div class="projects-header page-header">
<h2>上傳圖片展示</h2>
<p>將上傳的圖片展示在頁面中</p>
</div>
<div class="row pic_body">
<!-- 使用js顯示圖片 -->
</div>
<!--分頁-->
<nav aria-label="Page navigation" style="text-align:center">
<ul class="pagination pagination-lg">
<!-- 使用js顯示頁碼 -->
</ul>
</nav>
</div>
<footer class="footer container">
<div class="row footer-bottom">
<ul class="list-inline text-center">
<h4><a href="class.test.com" target="_blank">class.test.com</a> | XX網</h4>
</ul>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="style/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="style/js/bootstrap.min.js"></script>
<script type="text/JavaScript">
function show(){
if(document.getElementById("image").value == ''){
alert('請選擇圖片');
}
if(document.getElementById("info").value == ''){
alert('請輸入圖片描述');
}
}
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="style/js/Ajax.js"></script>
<script>
let pageNo = 1;
let kws = '';
let searchBtn = document.getElementsByClassName('searchBtn')[0];
searchBtn.onclick = function() {
let search = document.getElementsByClassName('keywords')[0];
let keywords = search.value;
requestData(pageNo, keywords);
kws = keywords;
};
let requestPage = function(page) {
requestData(page, kws);
pageNo = page;
};
let requestData = function(page_number, keywords) {
let pagination = document.getElementsByClassName('pagination')[0];
let pic_body = document.getElementsByClassName('pic_body')[0];
pic_body.innerHTML = '<p style="text-align:center"><i class="fa fa-spinner fa-spin" style="font-size:24px"></i> 加載中...</p>';
$.get('search.php', {"page": page_number, "keywords": keywords}, function (res) {
let divs = '';
if (res.code == 1) {
// 請求成功
res.rows.forEach(function (item) {
let div = '<div class="col-sm-6 col-md-3 col-lg-4"><div class="image"><a href="' + item.path + '" target="_blank"><img class="img-responsive" src="' + item.path + '" ></a><div class="caption"><p>' + item.info + '</p></div></div></div>';
divs += div;
});
pic_body.innerHTML = divs;
// 加載頁碼導航
// previous
let previousBtn = '';
if (res.page_number == 1) {
previousBtn = '<li class="page-item disabled"><a class="page-link" href="javascript:requestPage(' + (res.page_number - 1) + ');">Previous</a></li>';
} else {
previousBtn = '<li class="page-item"><a class="page-link" href="javascript:requestPage(' + (res.page_number - 1) + ');">Previous</a></li>';
}
// next
let nextBtn = '';
if (res.page_total == res.page_number) {
nextBtn = '<li class="page-item disabled"><a class="page-link" href="javascript:requestPage(' + (res.page_number + 1) + ');">Next</a></li>';
} else {
nextBtn = '<li class="page-item"><a class="page-link" href="javascript:requestPage(' + (res.page_number + 1) + ');">Next</a></li>'
}
let pages = previousBtn;
for (let page = 1; page <= res.page_total; page++) {
let active = '';
if (page == res.page_number) {
active = 'active';
}
pages += '<li class="page-item ' + active + '"><a class="page-link" href="javascript:requestPage(' + page + ');">' + page + '</a></li>';
}
pages += nextBtn;
pagination.innerHTML = pages;
}
},'json');
};
requestData(1, '');
</script>
</body>
</html>
圖片相關功能處理 upload_class.php
<?php
//接收傳過來的數據
$description=$_POST['description'];//描述
$mark=$_POST['mark'];//水印
$scale=$_POST['scale'];//比例 800*600
$path='';//圖片存儲路徑
//根據比例獲取寬高
$width=substr($scale,0,3);//800
$height=substr($scale,4,3);//600
//上傳圖片並存儲
require('UploadFile.php');
$upload = new UploadFile('test_pic');
$upload->setDestinationDir('./uploads');
$upload->setAllowMime(['image/jpeg', 'image/gif','image/png']);
$upload->setAllowExt(['gif', 'jpeg','jpg','png']);
$upload->setAllowSize(2*1024*1024);
if ($upload->upload()) {
$filename=$upload->getFileName()[0];
$dir=$upload->getDestinationDir();
$path=$dir.'/'.$filename;//圖片存儲的實際路徑
} else {
var_dump($upload->getErrors());
}
//根據比例調整圖像
require_once './lib/Image.php';
$image = new \test\Lib\Image($path);
//放大並保存
$image->resize($width,$height)->save($path);
$info = getimagesize($path);
//根據不同的圖像type 來創建圖像
switch($info[2])
{
case 1://IMAGETYPE_GIF
$image = imagecreatefromgif($path);
break;
case IMAGETYPE_JPEG:
$image = imagecreatefromjpeg($path);
break;
case 3:
$image = imagecreatefrompng($path);
break;
default:
echo '圖像格式不支持';
break;
}
//添加水印
if($mark==1){
$logo=imagecreatefrompng('./uploads/logo.png');
//添加水印
imagecopy($image,$logo,0,0,0,0,imagesx($logo),imagesy($logo));
//header('Content-type:image/png');
imagejpeg($image,$path);
}
$dst_image=imagecreatetruecolor($width,$height);
//拷貝源圖像左上角起始
imagecopy( $dst_image, $image, 0, 0, 0, 0, $width, $height );
imagejpeg($dst_image,$path);
//存入數據庫
$servername = "localhost";
$username = "root";
$password = "123456";
$dbname = "pic";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
// 設置 PDO 錯誤模式，用於拋出異常
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$sql = "INSERT INTO pic(`path`, `mark`, `scale`,`info`)
VALUES ('$path', '$mark', '$scale','$description')";
// 使用 exec() ，沒有結果返回
$conn->exec($sql);
exit("<script>alert(\"圖片上傳成功!\");window.location=\"index.php\";</script>");
}
catch(PDOException $e)
{
echo $sql . "<br>" . $e->getMessage();
}
封裝好的文件上傳類 UploadFile.php
<?php
/**
* Created by PhpStorm.
* User: JasonLee
* Date: 2018/11/11
* Time: 22:01
*/
class UploadFile
{
/**
*
*/
const UPLOAD_ERROR = [
UPLOAD_ERR_INI_SIZE => '文件大小超出了php.ini當中的upload_max_filesize的值',
UPLOAD_ERR_FORM_SIZE => '文件大小超出了MAX_FILE_SIZE的值',
UPLOAD_ERR_PARTIAL => '文件只有部分被上傳',
UPLOAD_ERR_NO_FILE => '沒有文件被上傳',
UPLOAD_ERR_NO_TMP_DIR => '找不到臨時目錄',
UPLOAD_ERR_CANT_WRITE => '寫入磁盤失敗',
UPLOAD_ERR_EXTENSION => '文件上傳被擴展阻止',
];
/**
* @var
*/
protected $field_name;
/**
* @var string
*/
protected $destination_dir;
/**
* @var array
*/
protected $allow_mime;
/**
* @var array
*/
protected $allow_ext;
/**
* @var
*/
protected $file_org_name;
/**
* @var
*/
protected $file_type;
/**
* @var
*/
protected $file_tmp_name;
/**
* @var
*/
protected $file_error;
/**
* @var
*/
protected $file_size;
/**
* @var array
*/
protected $errors;
/**
* @var
*/
protected $extension;
/**
* @var
*/
protected $file_new_name;
/**
* @var float|int
*/
protected $allow_size;
/**
* UploadFile constructor.
* @param $keyName
* @param string $destinationDir
* @param array $allowMime
* @param array $allowExt
* @param float|int $allowSize
*/
public function __construct($keyName, $destinationDir = './uploads', $allowMime = ['image/jpeg', 'image/gif'], $allowExt = ['gif', 'jpeg'], $allowSize = 2*1024*1024)
{
$this->field_name = $keyName;
$this->destination_dir = $destinationDir;
$this->allow_mime = $allowMime;
$this->allow_ext = $allowExt;
$this->allow_size = $allowSize;
}
/**
* @param $destinationDir
*/
public function setDestinationDir($destinationDir)
{
$this->destination_dir = $destinationDir;
}
/**
* @param $allowMime
*/
public function setAllowMime($allowMime)
{
$this->allow_mime = $allowMime;
}
/**
* @param $allowExt
*/
public function setAllowExt($allowExt)
{
$this->allow_ext = $allowExt;
}
/**
* @param $allowSize
*/
public function setAllowSize($allowSize)
{
$this->allow_size = $allowSize;
}
/**
* @return bool
*/
public function upload()
{
// 判斷是否爲多文件上傳
$files = [];
if (is_array($_FILES[$this->field_name]['name'])) {
foreach($_FILES[$this->field_name]['name'] as $k => $v) {
$files[$k]['name'] = $v;
$files[$k]['type'] = $_FILES[$this->field_name]['type'][$k];
$files[$k]['tmp_name'] = $_FILES[$this->field_name]['tmp_name'][$k];
$files[$k]['error'] = $_FILES[$this->field_name]['error'][$k];
$files[$k]['size'] = $_FILES[$this->field_name]['size'][$k];
}
} else {
$files[] = $_FILES[$this->field_name];
}
foreach($files as $key => $file) {
// 接收$_FILES參數
$this->setFileInfo($key, $file);
// 檢查錯誤
$this->checkError($key);
// 檢查MIME類型
$this->checkMime($key);
// 檢查擴展名
$this->checkExt($key);
// 檢查文件大小
$this->checkSize($key);
// 生成新的文件名稱
$this->generateNewName($key);
if (count((array)$this->getError($key)) > 0) {
continue;
}
// 移動文件
$this->moveFile($key);
}
if (count((array)$this->errors) > 0) {
return false;
}
return true;
}
/**
* @return array
*/
public function getErrors()
{
return $this->errors;
}
/**
* @param $key
* @return mixed
*/
protected function getError($key)
{
return $this->errors[$key];
}
/**
*
*/
protected function setFileInfo($key, $file)
{
// $_FILES name type temp_name error size
$this->file_org_name[$key] = $file['name'];
$this->file_type[$key] = $file['type'];
$this->file_tmp_name[$key] = $file['tmp_name'];
$this->file_error[$key] = $file['error'];
$this->file_size[$key] = $file['size'];
}
/**
* @param $key
* @param $error
*/
protected function setError($key, $error)
{
$this->errors[$key][] = $error;
}
/**
* @param $key
* @return bool
*/
protected function checkError($key)
{
if ($this->file_error > UPLOAD_ERR_OK) {
switch($this->file_error) {
case UPLOAD_ERR_INI_SIZE:
case UPLOAD_ERR_FORM_SIZE:
case UPLOAD_ERR_PARTIAL:
case UPLOAD_ERR_NO_FILE:
case UPLOAD_ERR_NO_TMP_DIR:
case UPLOAD_ERR_CANT_WRITE:
case UPLOAD_ERR_EXTENSION:
$this->setError($key, self::UPLOAD_ERROR[$this->file_error]);
return false;
}
}
return true;
}
/**
* @param $key
* @return bool
*/
protected function checkMime($key)
{
if (!in_array($this->file_type[$key], $this->allow_mime)) {
$this->setError($key, '文件類型' . $this->file_type[$key] . '不被允許!');
return false;
}
return true;
}
/**
* @param $key
* @return bool
*/
protected function checkExt($key)
{
$this->extension[$key] = pathinfo($this->file_org_name[$key], PATHINFO_EXTENSION);
if (!in_array($this->extension[$key], $this->allow_ext)) {
$this->setError($key, '文件擴展名' . $this->extension[$key] . '不被允許！');
return false;
}
return true;
}
/**
* @return bool
*/
protected function checkSize($key)
{
if ($this->file_size[$key] > $this->allow_size) {
$this->setError($key, '文件大小' . $this->file_size[$key] . '超出了限定大小' . $this->allow_size);
return false;
}
return true;
}
/**
* @param $key
*/
protected function generateNewName($key)
{
$this->file_new_name[$key] = uniqid() . '.' . $this->extension[$key];
}
/**
* @param $key
* @return bool
*/
protected function moveFile($key)
{
if (!file_exists($this->destination_dir)) {
mkdir($this->destination_dir, 0777, true);
}
$newName = rtrim($this->destination_dir, '/') . '/' . $this->file_new_name[$key];
if (is_uploaded_file($this->file_tmp_name[$key]) && move_uploaded_file($this->file_tmp_name[$key], $newName)) {
return true;
}
$this->setError($key, '上傳失敗！');
return false;
}
/**
* @return mixed
*/
public function getFileName()
{
return $this->file_new_name;
}
/**
* @return string
*/
public function getDestinationDir()
{
return $this->destination_dir;
}
/**
* @return mixed
*/
public function getExtension()
{
return $this->extension;
}
/**
* @return mixed
*/
public function getFileSize()
{
return $this->file_size;
}
}
搜索功能實現 search.php
<?php
// 接收請求數據
$pageNo = $_GET['page'] ?? 1;
$pageSize = 9;
// 接收查詢參數
$keywords = $_GET['keywords'] ?? '';
$data = [];
//模擬加載中的圖標sleep(3);
try {
$pdo = new PDO('mysql:host=localhost:3306;dbname=pic',
'root',
'123456',
[PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
);
// 請求mysql 查詢記錄總數
$sql = 'SELECT count(*) AS aggregate FROM pic';
if (strlen($keywords) > 0) {
$sql .= ' WHERE info like ?';
}
$stmt = $pdo->prepare($sql);
if (strlen($keywords) > 0) {
$stmt->bindValue(1, '%' . $keywords . '%', PDO::PARAM_STR);
}
$stmt->execute();
$total = $stmt->fetch(PDO::FETCH_ASSOC)['aggregate'];
// 計算最大頁碼，設置頁碼邊界
$minPage = 1;
$maxPage = ceil($total / $pageSize); // 3.6
$pageNo = max($pageNo, $minPage);
$pageNo = min($pageNo, $maxPage);
$offset = ($pageNo - 1) * $pageSize;
$sql="SELECT `path`,`info` FROM pic ";
if (strlen($keywords) > 0) {
$sql .= ' WHERE info like ?';
}
$sql .= 'ORDER BY id DESC LIMIT ?, ?';
$stmt = $pdo->prepare($sql);
if (strlen($keywords) > 0) {
$stmt->bindValue(1, '%' . $keywords . '%', PDO::PARAM_STR);
$stmt->bindValue(2, (int)$offset, PDO::PARAM_INT);
$stmt->bindValue(3, (int)$pageSize, PDO::PARAM_INT);
} else {
$stmt->bindValue(1, (int)$offset, PDO::PARAM_INT);
$stmt->bindValue(2, (int)$pageSize, PDO::PARAM_INT);
}
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
$data = [
'code' => 1,
'msg' => 'ok',
'rows' => $results,
'total_records' => (int)$total,
'page_number' => (int)$pageNo,
'page_size' => (int)$pageSize,
'page_total' => (int)$maxPage,
];
} catch (PDOException $e) {
$data = [
'code' => 0,
'msg' => $e->getMessage(),
'rows' => [],
'total_records' => 0,
'page_number' => 0,
'page_size' => (int)$pageSize,
'page_total' => 0,
];
}
header('Content-type: application/json');
echo json_encode($data);
最後數據庫格式
/*
Navicat MySQL Data Transfer
Source Server : localhost
Source Server Version : 80012
Source Host : localhost:3306
Source Database : pic
Target Server Type : MYSQL
Target Server Version : 80012
File Encoding : 65001
Date: 2020-01-14 16:22:49
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for pic
-- ----------------------------
DROP TABLE IF EXISTS `pic`;
CREATE TABLE `pic` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`path` varchar(255) DEFAULT NULL,
`mark` tinyint(3) DEFAULT NULL,
`scale` varchar(255) DEFAULT NULL,
`info` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of pic
-- ----------------------------
INSERT INTO `pic` VALUES ('1', './uploads/5e1d788084cc5.jpg', '1', '800*600', '這是測試圖片1');
INSERT INTO `pic` VALUES ('2', './uploads/5e1d789766591.jpg', '1', '600*450', '這是測試圖片2');
