Тема первого урока была загрузка картинки на сервер, выполнена посредством языка веб программирования php и базы данных mysql. Теперь же мы переходим ко второму уроку. Данный скрипт в большинстве случаев, пригодится для фотогалереи на сайте, так как в этом скрипте участвуют сразу две загруженные картинки на сервер.
К примеру, у Вас есть полноценная фотогалерея на сайте, Вам нужно в своей самописной CMS сделать загрузку двух картинок на сервер, одна будет миниатюра, а другая картинка большого размера. Принцип действий очень прост, при нажатии миниатюры открывается большая картинка. В итоге мы получаем полноценную фотогалерею.
Переходим к самому скрипту.
Для начала подключаемся к базе данных.
Файл bd.php
<?
$db = mysql_connect ("localhost", "Логин", "Пароль");
mysql_select_db ("База данных", $db);
if (!$db) echo mysql_error();
?>
Структура таблицы 3_images_two
CREATE TABLE IF NOT EXISTS `3_images_two` ( `id` int(100) NOT NULL AUTO_INCREMENT, `img_small` varchar(255) NOT NULL, `img_big` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=2 ;
В каждом файле прописываем подключение стилей css, кроме файла bd.php
<link rel="stylesheet" type="text/css" href="style.css"/>
Файл style.css
a.add_images {
background: url(images/add_images_link.png);
/* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 250px; /* Ширина рисунка */
height: 50px; /* Высота рисунка */
text-decoration: none;
}
a.add_images:hover {
background: url(images/add_images_hover.png);
/* Путь к файлу с заменяемым рисунком */
}
.add_images_text
{
color: red;
font-weight: bold;
font-size: 14px;
padding-left: 30px;
padding-top: 15px;
}
.input
{
border: 1px solid red;
}
.label
{
color: red;
}
.img
{
width: 150px;
}
Файл index.php
Подключаемся к базе данных, выводится кнопочка добавить картинки, ниже выводятся миниатюры и большие картинки из таблицы базы данных.
<?php
echo"<a href='add_images_form.php' class='add_images'>
<div class='add_images_text'>ДОБАВИТЬ КАРТИНКИ</div></a><br><br>";
include ("bd.php"); //подключение к базе данных
$sql = mysql_query("SELECT id, img_small, img_big FROM 3_images_two");
// Выбор из базы данных полей id и img
if (!$sql)
{
exit();
}
if (mysql_num_rows($sql) > 0)
{
@$row=mysql_fetch_array($sql);
$i=1;
do
{
echo "<table><tr><td valign='top'>";
echo $i++;
echo "<td>";
echo "<img src='$row[img_small]' class='img'/>";
echo "</td>";
echo "<td>";
echo "<img src='$row[img_big]' class='img'/>";
echo "</td>
</tr></table><br>";
}
while (@$row = mysql_fetch_array($sql));
}
else
{
echo "<label class='label'>В базе данных нет добавленных картинок!</label>";
exit();
}
?>
Файл add_images_form.php
Выводим форму для добавления двух картинок, у каждой свой идентификатор и имя. Ниже выводим кнопочку сохранить. Если миниатюра и большая картинка не указаны и нажать кнопочку сохранить, то php выдаст ошибку и предложит вернуться назад, загрузить картинки. Если же картинки выбраны, они успешно загрузятся на сервер и php предложит два варианта, перейти к добавлению новых картинок, либо вернуться на главную страницу.
<form name='form' enctype='multipart/form-data' method='post' action='add_images.php'> <table><tr> <td> <p> <label class='label'>Выберите миниатюру</label><br> <input type='file' name='myfile' id='myfile' class='input'/> </p> </td> <td> <p> <label class='label'>Выберите большую картинку</label><br> <input type='file' name='myfiles' id='myfiles' class='input'/> </p> </td> </tr></table> <br> <p> <table> <tr> <td> <input type='image' src='images/add_images_save.png' title='Сохранить'> / </td> <td> <a href='index.php' class='add_images'> <div class='add_images_text'>НАЗАД</div></a> </td> </tr> </table> </p> </form>
Файл add_images.php
Скрипт обработчик по загрузке на сервер и в базу данных двух картинок, миниатюры и большой картинки, как видно, если Вы внимательно изучали прошлый урок загрузка картинки на сервер, то возможно заметили, что скрипт в принципе не изменился, добавились только новые параметры для загрузки второй картинки, особую важность стоит отметить при написании самих закрывающих тегов скобок, чтобы не запутаться, а так в общем, скрипт идентичен первому, только с добавлением нового кода для загрузки большой картинки на сервер.
<?php
include ("bd.php"); //подключение к базе данных
if (isset($_POST['img_small']))
if (isset($_POST['img_big']))
// Если поле выбора картинки не пустое - закачиваем её на сервер
$maxwidth = "500"; // максимальная ширина картинок на превью
$fotos_dir = "img/small/"; // Директория для фотографий товаров
$foto_name = $fotos_dir.time()."_".basename($_FILES['myfile']
['name']); // Полное имя файла вместе с путем
$foto_light_name = time()."_".basename($_FILES['myfile']['name']);
// Имя файла исключая путь
$foto_tag = "<img src=\"$foto_name\" border=\"0\">";
// Готовый тэг для вставки картинки на страницу
$foto_tag_preview = "<img src=\"$foto_name\" border=\"0\"
width=\"$maxwidth\">"; // Тот же тэг, но для превью
// Если поле выбора картинки не пустое - закачиваем её на сервер
$maxwidths = "2500"; // максимальная ширина картинок на превью
$fotos_dirs = "img/big/"; // Директория для фотографий товаров
$foto_names = $fotos_dirs.time()."_".basename($_FILES['myfiles']
['name']); // Полное имя файла вместе с путем
$foto_light_names = time()."_".basename($_FILES['myfiles']['name']);
// Имя файла исключая путь
$foto_tags = "<img src=\"$foto_names\" border=\"0\">";
// Готовый тэг для вставки картинки на страницу
$foto_tag_previews = "<img src=\"$foto_names\" border=\"0\"
width=\"$maxwidths\">"; // Тот же тэг, но для превью
// Текст ошибок
$error_by_mysql = "<label class=\"label\">
Ошибка при добавлении данных в базу</span>";
$error_by_file = "<label class=\"label\">
Невозможно загрузить файл в директорию. Возможно её не существует</span>";
// Начало
if(isset($_FILES["myfile"]))
{
$myfile = $_FILES["myfile"]["tmp_name"];
$myfile_name = $_FILES["myfile"]["name"];
$myfile_size = $_FILES["myfile"]["size"];
$myfile_type = $_FILES["myfile"]["type"];
$error_flag = $_FILES["myfile"]["error"];
if(isset($_FILES["myfiles"]))
{
$myfiles = $_FILES["myfiles"]["tmp_name"];
$myfile_names = $_FILES["myfiles"]["name"];
$myfile_sizes = $_FILES["myfiles"]["size"];
$myfile_types = $_FILES["myfiles"]["type"];
$error_flags = $_FILES["myfiles"]["error"];
// Если ошибок не было
if($error_flag == 0)
{
$DOCUMENT_ROOT = $_SERVER['DOCMENT_ROOT'];
$upfile = getcwd()."/img/small/" . time()."_".basename
($_FILES["myfile"]["name"]);
// Если ошибок не было
if($error_flags == 0)
{
$DOCUMENT_ROOT = $_SERVER['DOCMENT_ROOT'];
$upfiles = getcwd()."/img/big/" . time()."_".basename
($_FILES["myfiles"]["name"]);
if ($_FILES['myfile']['tmp_name'] and $_FILES['myfiles']['tmp_name'])
{
//Если не удалось загрузить файл
if (!move_uploaded_file($_FILES['myfile']['tmp_name'], $upfile))
{
echo "$error_by_file";
exit;
}
if (!move_uploaded_file($_FILES['myfiles']['tmp_name'], $upfiles))
{
echo "$error_by_file";
exit;
}
}
else
{
echo 'Проблема: возможна атака через загрузку файла. ';
echo $_FILES['myfile']['name'];
echo $_FILES['myfiles']['name'];
exit;
}
$q = "INSERT INTO 3_images_two(img_small, img_big) VALUES
('$foto_name', '$foto_names')";
$query = mysql_query($q);
// Данные успешно внесены в базу данных, выводим сообщение
if ($query == 'true') {
echo "
<div class='text'>
<p>Картинки успешно загружены на сервер!</p><br><br>
<table>
<tr>
<td>
<a href='add_images_form.php' class='add_images'>
<div class='add_images_text'>ДОБАВИТЬ ЕЩЕ КАРТИНКИ</div></a>
</td>
<td>
<a href='index.php' class='add_images'><div class='add_images_text'>
НА ГЛАВНУЮ</div></a>
</td>
</tr>
</table>
</div>
";
}
// В противном случае, выводим ошибку при добавлении в базу данных
else {
echo "$error_by_mysql";
}
}
}
elseif ($myfile_size == 0) {
echo "<br><label class='label'>Картинки не выбраны!<br><br>
Вернитесь и выберите картинки!</label><br><br>
<a href='add_images_form.php' class='add_images'>
<div class='add_images_text'>ВЫБРАТЬ КАРТИНКИ</div></a>";
}
}
}
?>
Итог:
Ну и в заключение, хочу отметить, что данный скрипт поможет в основном обладателям на своем сайте фотогалереи, либо по загрузке на сервер двух файлов одновременно. По количеству загрузок функционал можно расширить, но при этом значительно возрастет нагрузка на хостинг.
Благодарю за внимание, всем желаю удачи в реализации!