使用 PHP 和 MySQL 将图像添加到图库

Question

我正在尝试为我的照片库创建一个后端，以便我更轻松地将图像上传到画廊。

图库由缩略图、单行描述和连接到精美盒子的缩略图组成。很基本。 （缩略图和花式框图像使用相同的图像。）

我刚刚开始学习 PHP 和 MySQL 的基础知识，想知道如何使用此代码：（仅供参考，这只是图库的一部分。）

<li data-id="id-12" data-type="treeremoval">
<div class="column grid_3">
<a class="fancybox" rel="treeremoval" href="images/gallery/1.jpg" title="Tree Removal Lake of  the Ozarks">
<img src="images/gallery/1.jpg" alt="Tree Removal Lake of the Ozarks" class="max-img-border"></a>
<h5>Lake of the Ozarks Tree Removal </h5>
</div>  
</li>



<li data-id="id-11" data-type="treetrimming">
<div class="column grid_3">
<a class="fancybox" rel="treetrimming" href="images/gallery/2.jpg" title="Osage Beach Tree Trimming">
<img src="images/gallery/2.jpg" alt="Osage Beach Tree Trimming" class="max-img-border"></a>
<h5>Lake of the Ozarks Tree Trimming</h5>
</div>  
</li>

并创建一个管理系统，我可以将图像上传到画廊，而无需在每次客户向我发送图像时手动进入并调整代码。

差不多，我想创建一个表单，我可以在其中设置参数并将图像上传到图库页面。

如何使用上面的代码向列表中添加更多图片？

我想我要问的是如何设置数据库和表并将适当的 php 语法添加到 html 以获得我正在寻找的结果？

我了解如何创建表单以将图像上传到 ftp 目录。我只是迷失在设置数据库和表格以检索图像和文本并将它们放置在图库中

我会这样设置数据库吗？ （仅供参考，我现在不知道自己在做什么。）

数据库名称：主画廊

表： data-id: id 升序

（数据ID和数据类型非常重要，因为图库连接到过滤系统。我希望自动生成数据ID并将最新图像添加到图库顶部。）

数据类型：修剪树

数据类型：删除树

rel: 画廊1

rel: 画廊2

图片：...???

title: 奥沙克除树湖

title: 欧塞奇海滩树木修剪

那么对于h5标签

标题：奥扎克湖树木清除

标题：奥沙克湖树木修剪

对于图像，我使用的是 max-img-border 类，因为该网站是响应式的，并且我将所有图像的大小设置为 720 像素 x 482 像素

css 看起来像这样：

.max-img-border { 
 width:100%;
 height:auto;
 border:solid 2px #FFFFFF;
 margin-bottom:10px;
 }

通过使用这种方法，我已经设置好了，所以我只需要为缩略图和花式框图像处理一个图像。

我希望我的问题是有道理的。

我知道我的要求可能需要解释很多，但我们将不胜感激任何帮助。 甚至一些指向优秀教程的链接也可能会有所帮助。我在 Google 上搜索了一两天，但实际上找不到我要找的东西。

此外，如果您查看图库并在类别中随机播放，则过渡中会有很大的跳跃。我目前正在努力解决这个问题。

如果您需要我提供更多信息，请告诉我，我将非常愿意提供。

谢谢！

Answer 1

您需要一个 MySQL 表，其中包含有关图像的信息以及图像的文件名：

CREATE TABLE images (
    id int(3) not null auto_increment,
    data_type varchar(128) not null,
    title varchar(256) not null,
    file_name varchar(64) not null,
    primary key(id)
)

你将不得不制作一个图片上传表单，如下所示：

<form enctype="multipart/form-data" action="uploader.php" method="POST">
    Data type: <input type="text" name="dataType"><br>
    Title: <input type="text" name="title"><br>
    Image to upload: <input type="file" name="image"><br>
    <input type="submit" value="Upload">
</form>

还有一个 PHP 脚本来处理上传的文件并添加数据库条目：

uploader.php

<?php
$dataType = mysql_real_escape_string($_POST["dataType"]);
$title = mysql_real_escape_string($_POST["title"]);
$fileName = basename($_FILES["image"]["name"]);
$target_path = "images/gallery/".$fileName);
if (file_exists($target_path))
{
    echo "An image with that file name already exists.";
}
elseif (move_uploaded_file($_FILES["image"]["tmp_name"], $target_path))
{
    // The file is in the images/gallery folder. Insert record into database by
    // executing the following query:
    // INSERT INTO images
    // (data_type, title, file_name) VALUES('$dataType','$title','$fileName')
    echo "The image was successfully uploaded and added to the gallery :)";
}
else
{
    echo "There was an error uploading the file, please try again!";
}
?>

请注意，此脚本不安全，它会允许人们将例如 .php 文件上传到服务器。这样的事情将是必要的：

$allowed_extensions = array("jpg","jpeg","png","gif");
$extension = pathinfo($fileName, PATHINFO_EXTENSION);
if (!in_array($extension,$allowed_extensions))
{
    die("Only these file types are allowed: jpg, png, gif");
}

现在在图库页面上，您需要循环浏览数据库中的图像。

<?php
$images = mysql_query("SELECT * FROM images");
while ($image=mysql_fetch_assoc($images))
{
    ?>
    <li data-id="id-<?=$image["id"] ?>" data-type="<?=$image["data_type"] ?>">
    <div class="column grid_3">
    <a class="fancybox" rel="<?=$image["data_type"] ?>" href="images/gallery/<?=$image["file_name"] ?>" title="<?=$image["title"] ?>">
    <img src="images/gallery/<?=$image["file_name"] ?>" alt="<?=$image["title"] ?>" class="max-img-border"></a>
    <h5><?=$image["title"] ?></h5>
    </div>  
    </li>
    <?php
}
?>

请注意，上传表单必须受到保护，并且只提供给合适的人。您不希望垃圾邮件发送者将随机文件上传到您的服务器。