使用PHP和MySQL将图像添加到图库 [英] Use PHP and MySQL to add images to a gallery
问题描述
我正在尝试为我的照片库创建一个后端，这样可以使我更轻松地将图像上传到照片库.
图库由缩略图，一行描述和缩略图连接到一个精美的框组成.很基本的. (缩略图和精美图片使用的是同一张图片.)
我才刚刚开始学习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>
并创建一个管理系统，我可以将图像上传到图库，而无需每次客户向我发送图像时都手动进入并调整代码.
非常，我想创建一个表单，可以在其中设置参数并将图像上传到图库页面.
使用上面的代码如何将更多图像添加到列表中?
我想我要问的是如何设置数据库和表，并向html中添加适当的php语法以获得所需的结果?
我了解如何创建一个将图像上传到ftp目录的表单.我只是失去了建立数据库和表检索图像和文字，并放置在画廊
我会这样设置数据库吗? (仅供参考，我目前不知道我在做什么.)
数据库名称:maingallery
表: 数据ID:ID升序
(data-id和data-type非常重要，因为图库已连接到过滤系统.我希望data-id是自动生成的，并将最新图像添加到图库的顶部. /p>
数据类型:修剪树
数据类型:移除树
rel:gallery1
rel:gallery2
图片:... ???
title:奥扎克人的树木清除湖
title:欧塞奇(Osage)海滩树木修剪
然后输入h5标签
标题:移除奥扎克斯湖的树
标题:奥扎克斯湖的树木修剪
对于图片，我使用的是max-img-border类，因为该网站具有响应能力，并且我将所有图片的尺寸设置为720px x 482px
css看起来像这样:
.max-img-border {
width:100%;
height:auto;
border:solid 2px #FFFFFF;
margin-bottom:10px;
}
通过使用此方法，我对其进行了设置，因此对于缩略图和fancybox图像，只需要处理一个图像即可.
我希望我的要求是有道理的.
我知道我要问的可能有很多解释，但是任何帮助将不胜感激. 甚至一些指向良好教程的链接也可能会有所帮助.我在Google搜索了一两天，但无法真正找到我想要的东西.
此外，如果您查看图库并随机浏览类别，则过渡过程中会有很大的跳跃.我目前正在解决此问题.
如果您需要我的更多信息，请告诉我，我将非常乐意提供.
谢谢！
您将需要一个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
}
?>
请注意，上传表单必须受到保护，并且只有合适的人才能使用.您不希望垃圾邮件发送者将随机文件上传到您的服务器上.
I'm trying to create a back-end to my photo gallery so it will make it easier for me to upload images to the gallery.
The Gallery consists of a thumbnail image, a one line description and the thumbnail is hooked up to a fancy box. Pretty basic. (The thumbnail and fancy box image are using the same image.)
I'm just starting to learn the basics of PHP and MySQL and would like to know how I can take this code: (FYI this is only part of the gallery.)
<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>
and create an admin system that I can upload images to the gallery without having to manually go in and adjust the code every time a client sends me an image.
Pretty much, I want to create a form where I can set the parameters and uploaded the image(s) to the gallery page.
Using the above code how can I add more images to the list?
I guess what I'm asking is how to setup a database and table and add the appropriate php syntax to the html to get the results I'm looking for?
I understand how to create a form to upload the images into a ftp directory. I'm just lost on setting up the database and tables to retrieve the images and text and place them in the gallery
Would I set the database up like this? (FYI I have no clue as to what I'm doing at this point.)
Database name: maingallery
Table: data-id: id ascending
( The data-id and data-type are very important as the gallery is connected to a filtering system. I would want the data-id to be auto generated and add the newest image to the top of the gallery. )
data-type: treetrimming
data-type: treeremoval
rel: gallery1
rel: gallery2
image: ...???
title: Tree Removal Lake of the Ozarks
title: Osage Beach Tree Trimming
Then for the h5 tag
caption: Lake of the Ozarks Tree Removal
caption: Lake of the Ozarks Tree Trimming
For the images I'm using a max-img-border class because the site is responsive and I have all the images sized to 720px x 482px
The css looks like this:
.max-img-border {
width:100%;
height:auto;
border:solid 2px #FFFFFF;
margin-bottom:10px;
}
By using this method I have it set up so I only have to deal with one image for the thumbnail and fancybox image.
I hope what I'm asking makes sense.
I know what I'm asking for is probably a lot to explain, but any help would be greatly appreciated. Even some links to a good tutorial might help. I searched Google for a day or two, but can't really find exactly what I'm looking for.
Also If you look at the gallery and shuffle through the categories there is a large jump in the transition. I'm currently working on fixing this.
If you need anymore info from me please let me know and I will be more than willing to provide it.
Thank you!
You'll need a MySQL table containing the information about the image, and the file name of the image:
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)
)
And you're going to have to make an image upload form, something like this:
<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>
And a PHP script to handle the uploaded files and add database entries:
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!";
}
?>
Note that this script is not safe, it would allow people to upload for example .php files to the server. Something like this will be necessary:
$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");
}
Now on the gallery page you'll want to loop through the images in the database.
<?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
}
?>
Please note that the upload form will have to be protected, and only available to the right people. You don't want spammers to upload random files onto your server.
这篇关于使用PHP和MySQL将图像添加到图库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
