Загрузка фотографий, картинок на сайт является актуальным решением для каждого проекта. Существует множество разновидностей скриптов, который каждый по своему имеет функциональную способность по организации обращений между выводом и загрузкой картинок на сервер. Кстати, имеется еще очень интересная drag drop загрузка, реализация которой проходит методом перемещения объекта в область для загрузки файлов.
Мне частенько приходилось сталкиваться с подобным вопросом и хотелось бы поделиться своим мнением, а так же скриптом, который возможно сможет пригодиться и Вам. Для начала я бы хотел ознакомить Вас с содержимым данного скрипта, который написан исключительно только на php и имеет работу с базой данных mysql. По своему желанию, Вы конечно можете и переделать его под другую базу данных, допустим под oracle.
Функциональность скрипта, можно будет изменить и немного по другому, допустим добавлять не одну, а загружать две картинки на сервер, добавить возможности удаления, редактирования, перемещения, обрезки и множества других полезных инструментов онлайн-изменения.
В общем, все зависит от Вашего личного желания, изменить скрипт под свои потребности, в зависимости от реализации его в применении. Теперь непосредственно перейдем к самому коду.
Подключаемся сначала к базе данных.
Файл bd.php
<?
$db = mysql_connect ("localhost", "Логин", "Пароль");
mysql_select_db ("База данных", $db);
if (!$db) echo mysql_error();
?>
Выводим структуру таблицы 3_images
-- -- Структура таблицы `3_images` -- CREATE TABLE IF NOT EXISTS `3_images` ( `id` int(20) NOT NULL AUTO_INCREMENT, `img` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=8 ;
Файл 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 FROM 3_images");
// Выбор из базы данных полей 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='img/$row[img]' class='img'/>";
echo "</td></tr></table><br>";
}
while (@$row = mysql_fetch_array($sql));
}
else
{
echo "<label class='label'>В базе данных нет
добавленных картинок!</label>";
exit();
}
?>
Файл add_images_form.php
Форма загрузки картинки с именем и идентификатором name='myfile'
<form name='form' enctype='multipart/form-data' method='post' action='add_images.php'> <p> <label class='label'>Выберите картинку</label> <br> <input type='file' name='myfile' id='myfile' class='input'/> </p> <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
Обработчик загрузки картинок на сервер. В коде указывается максимальная ширина миниатюр, директория для загрузки картинок, а также заносится в базу данных директория данной загруженной картинки. Так же существует такие параметры, которые могут участвовать для выведения информации о загруженных картинках:
$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"];
Полностью весь код файла add_images.php:
<?php
include ("bd.php"); //подключение к базе данных
if (isset($_POST['img']))
// Если поле выбора картинки не пустое -
закачиваем её на сервер
$maxwidth = "600"; // максимальная ширина
картинок на превью
$foto_dir = "img/"; // Директория для фотографий
товаров
$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\">";
// Тот же тэг, но для превью
// Текст ошибок
$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($error_flag == 0)
{
$DOCUMENT_ROOT = $_SERVER['DOCMENT_ROOT'];
$upfile = getcwd()."/img/" . time()."_".basename
($_FILES["myfile"]["name"]);
if ($_FILES['myfile']['tmp_name'])
{
//Если не удалось загрузить файл
if (!move_uploaded_file($_FILES['myfile']
['tmp_name'], $upfile))
{
echo "$error_by_file";
exit;
}
}
else
{
echo 'Проблема: возможна атака через загрузку файла. ';
echo $_FILES['myfile']['name'];
exit;
}
$q = "INSERT INTO 3_images (img) VALUES
('$foto_name')";
$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>";
}
}
?>
Файл style.php
Кроме файла bd.php, везде подключаем файл стилей.
<link rel="stylesheet" type="text/css" href="style.css"/>
Немного 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;
}
Итог:
Подводя итог, могу сказать, что данный скрипт прост в понимании и легко настраиваемый под потребности любой загрузки на сервер, можно применить как для загрузки картинок, так и прайс-листов, либо чего-нибудь другого, допустим файлов doc или excel.
Благодарю Вас за внимание, всем удачи в реализации!