Практическая работа 10 (4 часа) Тема 5. Загрузка файлов изображений на Web- сервер

МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Практическая работа 10
(4 часа)
Тема 5. Загрузка файлов изображений на Webсервер
Цель — освоить технологию загрузки и редактирования файлов изображений
на Web-сервере и использование их на Web-страницах.
Справочные сведения
В форме с загрузкой файла обязательно должен присутствовать следующий
атрибут: enctype=«multipart/form-data». Для загрузки файлов в форме
используется элемент input type=«file».
Характеристики
$_FILES:
загружаемого
файла
доступны
—
содержит
$_FILES["filename"]["name"]
на клиентской машине;
$_FILES["filename"]["size"]
в байтах;
—
содержит
через
двумерный
исходное
размер
имя
загруженного
массив
файла
файла
$_FILES ["filename"] ["type"] — MIME-тип файла;
$_FILES ["filename"] ["tmp_name"] — имя временного файла, в котором
сохраняется загруженный файл.
Основные функции работы с существующим файлом:
bool copy(string filename, string new_filename) — копирование файла;
bool file_exists(string filename) — проверка существования файла;
int filesize(string filename) — размер файла в байтах;
string filetype(string filename) — тип файла;
bool unlink(string filename) — удаление файла;
Основные функции работы с каталогом:
int opendir(string dirname) — открытие каталога;
string readdir(int dir) — чтение каталога;
bool сlosedir(int dir) — закрытие каталога;
imagecopyresampled()
—
функция
создания
из исходных. Синтаксис этой функции следующий:
новых
изображений
bool imagecopyresampled (resource dst_image, resource src_image, int
dst_x, int dst_y, int src_x, int src_y, int dst_w, int dst_h, int src_w, int src_h )
где
1
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
resource dst_image — идентификатор нового изображения;
resource src_image — идентификатор исходного изображения;
int dst_x, int
изображении;
dst_y —
координаты
(x,y)
верхнего
левого
угла
в новом
int src_x, int src_y — координаты (x,y) верхнего левого угла копируемого блока
существующего изображения;
int dst_w, int dst_h — новые ширина и высота копируемого блока;
int src_w, int src_h — ширина и высота исходного копируемого блока.
Задание
1. Проверить технологии загрузки файла на Web-сервер и удаления файла.
2. Создать фотогалерею, администрируемую через Web-интерфейс.
3. Применить технологию создания уменьшенных графических файлов при
помощи библиотеки GD.
Технология выполнения
10.1. Проверка загрузки файла на Web-сервер
1. С помощью Проводника Windows в файловой структуре учебного Webресурса создать каталог www/images.
2. В файле
www/index.php
создать
форму
вида,
представленного
на рис. 10.1.
Форму
реализовать
в виде
функции,
запускаемой
по гиперссылке "Загрузка файлов" (в качестве обработчика данных
в форме указать файл images.php).
3. Для экспериментов по загрузке можно использовать графические файлы,
расположенные
по адресу:
free_access(Y)\Разработка
электронного
портала\img\.
Рис. 10.1. Пример формы загрузки файла
4. В отдельном
файле
с именем
www/images.php,
принимающий данные из формы через глобальный
Пример кода:
2
создать
скрипт,
массив $_FILES.
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
if (copy
["name"]))
($_FILES["img"]
["tmp_name"],
"images/".$_FILES["img"]
{ echo"Файл успешно загружен <br>"; }
else
{ echo"Ошибка загрузки файла"; }
где img — имя поля загрузки файла (input type=file) в форме.
5. Убедиться, что после работы скрипта загрузки файла загружаемый файл
появился в папке www/images/.
6. Дополнить скрипт images.php функцией, отображающей параметры
загруженного файла, взятые из глобального массива $_FILES (рис. 10.2).
Рис. 10.2. Пример работы функции вывода
параметров загруженного файла
7. Дополнить скрипт images.php функцией, проверяющей размер файла (при
помощи элемента $_FILES["input_name"]["size"]) до его копирования
в каталог
www/images
с выводом
соответствующего
сообщения
(рис. 10.3).
Рис. 10.3. Пример работы функции проверки
размера загружаемого файла
3
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
8. Дополнить скрипт images.php функцией file_exists(), проверяющей
наличие файла с таким именем в каталоге images до его копирования
в этот каталог с выводом соответствующего сообщения (рис. 10.4).
Рис. 4. Пример работы функции проверки существования
имени загружаемого файла
10.2. Создание фотогалерии
1. Вывести содержимое каталога images при помощи
каталога, например при помощи следующего кода:
функции
чтения
$dir=opendir("images");
while(($file=readdir($dir))!==false)
{
if($file!==".."&&$file!==".") print "<img src=images/$file> <br>";
}
closedir($dir);
Оформить вывод рисунков в виде таблицы с указанием имен файлов.
2. Дополнить скрипт images.php возможностью удаления любого рисунка
путем размещения в цикле while формы с кнопкой удаления файла
(рис. 10.5).
4
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 10.5. Пример вывода содержимого каталога с рисунками
и возможностью их удаления
3. Изменить форму загрузки файла так, чтобы можно было загружать два
варианта изображения (рис. 10.6).
Рис. 10.6. Пример формы с загрузкой двух файлов
4. При этот один файл (с уменьшенным изображением) загружать в каталог
www/images,
а другой
(с увеличенным
изображением)
загружать
в каталог www/images_full, который предварительно необходимо
создать.
5
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Чтобы не повторять код скрипта обработки данных формы, следует оформить
его в виде функции с входными параметрами — именем поля загрузки файла
и именем каталога. Для соответствия уменьшенной и увеличенной фотографий
можно использовать их одинаковое именование в обоих каталогах с файлами
фотографий (images и images_full).
5. Дополнить Web-интерфейс возможностью открывать увеличенную копию
фотографии в новом окне (по гиперссылке с уменьшенного изображения).
10.3. Автоматическое создание файлов с уменьшенными
изображениями
1. Убедиться в наличии библиотеки GD, предназначенной для работы
с растровыми изображениями. Для этого можно использовать функцию
phpinfo(), размещенную в любом скрипте, которая должна вывести
справочные сведения, в том числе при наличии библиотеки GB в таблицу.
Пример раздела gd при наличии графической библиотеки gd
GD Support
enabled
GD Version
bundled (2.0.28 compatible)
FreeType Support
enabled
FreeType Linkage
with freetype
GIF Read Support
enabled
GIF Create Support
enabled
JPG Support
enabled
PNG Support
enabled
WBMP Support
enabled
XBM Support
enabled
2. Проверить технологию создания уменьшенных изображений на основе
следующего примера кода, в котором исходный файл original.jpg, допустим,
400×250 пикселей, и мы хотим создать его уменьшенный вариант
small.jpg — 100×60:
<?php
define('SOURCE', 'original.jpg'); // исходный файл в виде константы
define('TARGET', 'small.jpg'); // имя файла для "превьюшки"
define('NEWX', 100); // ширина "превьюшки"
6
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
define('NEWY', 60); // высота "превьюшки"
// Определяем размер изображения с помощью функции getimagesize:
$size = getimagesize(SOURCE);
if ($size === false) die ('Bad image file!');
// Читаем в память JPEG-файл с помощью функции imagecreatefromjpeg:
$source = imagecreatefromjpeg(SOURCE)
or die('Cannot load original JPEG');
// Создаем новое изображение
$target = imagecreatetruecolor(NEWX, NEWY);
// Копируем существующее изображение в новое с изменением размера:
imagecopyresampled($target,$source,0,0,0,0,NEWX,NEWY,$size[0],$size[1]);
// Сохраняем результат в JPEG-файле:
imagejpeg($target, TARGET, 100);
// Не забываем освободить память:
imagedestroy($target);
imagedestroy($source);
?>
Функция getimagesize(), требуя в качестве своего параметра имя файла,
возвращает массив, содержащий (помимо прочего, о чем можно прочитать
в документации), ширину $size[0] и высоту $size[1] указанного изображения.
В случае, если формат файла не распознан, getimagesize возвращает false.
Функция генерации графических файлов imagejpeg() сохраняет результат
в JPEG-файле, ее синтаксис:
bool imagejpeg ( resource image [, string filename [, int quality]] )
Обязательным
параметром
этой
функции
является
идентификатор
изображения. Функция может выводить результат своей работы не только
в браузер, но и в файл. Для этого следует указать имя файла в необязательном
втором параметре. Функция imagejpeg имеет и третий необязательный
параметр — качество изображения. В примере установлено максимальное
качество — 100.
Задание на самостоятельную работу
Изменить скрипт администрирования фотогалереи так, чтобы реализовать
механизм автоматического создания уменьшенных копий изображений формата
jpg и размещения их в каталог images. В форме загрузки файлов можно оставить
только поле для загрузки увеличенного изображения, файл которого должен
помещаться в каталог images_full.
7