Ekaterina B. Egorkina,©2012 1 VEELTECH.RU Загрузка и вывод изображений Каким образом можно сохранить картинку в БД, а потом отобразить ее на странице? - презентация

1 Ekaterina B. Egorkina,© VEELTECH.RU Загрузка и вывод изображений Каким образом можно сохранить картинку в БД, а потом отобразить ее на странице? Задача: добавить возможность хранения и отображения фотографий сотрудников. Фотография должна появляться на странице редактирования данных сотрудника и в общем списке для каждого сотрудника.

2 Ekaterina B. Egorkina,© VEELTECH.RU Начнем со страницы редактирования данных сотрудника. Здесь появляется элемент, который позволяет выбрать файл с изображением и сохраняет выбранное изображение в БД. Элемент для загрузки изображения

3 Ekaterina B. Egorkina,© VEELTECH.RU Кнопка «Обзор» вызывает диалоговое окно выбора файла.

4 Ekaterina B. Egorkina,© VEELTECH.RU После выбора изображения, имя файла с полным адресом появляется в диалоговом элементе «Загрузка фотографии». Чтобы информация попала в БД, остается нажать «Сохранить».

5 Ekaterina B. Egorkina,© VEELTECH.RU

6 Ekaterina B. Egorkina,© VEELTECH.RU При повторном открытии карточки личных данных, появляется изображение, сохраненное в БД.

7 Ekaterina B. Egorkina,© VEELTECH.RU alter table EMPLOYEES add ( PHOTO blob null ); Для загрузки фотографии в БД нужно подготовить место. Бинарная информация такого рода хранится в объектах типа BLOB. Следовательно, добавим в таблицу сотрудников (EMPLOYEES) новое поле PHOTO.

8 Ekaterina B. Egorkina,© VEELTECH.RU Перед началом работы над добавлением в приложение APEX возможности работы с фотографиями сотрудников, необходимо создать связанную пару страниц с отчетом, где формируется полный список сотрудников, и связанной с ним формой для редактирования каждой записи. Элементы Report and Form.

9 Ekaterina B. Egorkina,© VEELTECH.RU

10 Ekaterina B. Egorkina,© VEELTECH.RU

11 Ekaterina B. Egorkina,© VEELTECH.RU Пометим элемент как «Загрузка фотографии»

12 Ekaterina B. Egorkina,© VEELTECH.RU Т.к. предполагается хранить фотографии в таблице EMPLOYEES, то тип хранения должен быть задан как BLOB column specified in Item Source attribute Параметр размещения содержимого имеет 2 варианта: 1. Inline – отображение информации непосредственно на странице (возможность зависит от настроек браузера и поддерживаемых форматов) 2. Attachment – отображение ссылки для загрузки содержимого

13 Ekaterina B. Egorkina,© VEELTECH.RU Это те самые атрибуты источника информации (Item Source attribute). Тип источника (Source Type) – поле таблицы (Database Column). Имя поля (Database Column Name) – созданное поле PHOTO таблицы EMPLOYEES. Важно! Параметр времени использования (Source Used) должен быть установлен в значение «Всегда» (Always).

14 Ekaterina B. Egorkina,© VEELTECH.RU Т.к. вариант отображения Inline для объекта File Browse доступен не всегда, сделаем отдельное отображение картинки через элемент Display Image.

15 Ekaterina B. Egorkina,© VEELTECH.RU Последовательность размещения данного элемента несколько иная, чем обычно. Чтобы расположить картинку справа от остальных элементов, ее необходимо поместить во вторую колонку первой строки невидимой таблицы, с помощью которой форматируется вывод объектов в регионе. Поэтому, элемент должен следовать между первым и вторым элементом, которые уже присутствуют на странице. Это соответствует любому значению от 11 до й элемент Создаваемый элемент 2-й элемент 3-й элемент …

16 Ekaterina B. Egorkina,© VEELTECH.RU Элемент не располагается на новой строке, т.к. будет размещаться во 2-й колонке первой строки.

17 Ekaterina B. Egorkina,© VEELTECH.RU Способ хранения информации аналогичен предыдущему элементу.

18 Ekaterina B. Egorkina,© VEELTECH.RU Параметры источника информации аналогичны предыдущему элементу.

19 Ekaterina B. Egorkina,© VEELTECH.RU

20 Ekaterina B. Egorkina,© VEELTECH.RU

21 Ekaterina B. Egorkina,© VEELTECH.RU Т.к. картинка имеет высоту большую, чем обычные однострочные элементы, то, во избежание растяжения первой строки на высоту картинки, объединим все ячейки 2-й колонки форматирующей таблицы. 1-й элемент Элемент Display Image 2-й элемент 3-й элемент …

22 Ekaterina B. Egorkina,© VEELTECH.RU Для отображения данных, хранящихся в поле BLOB в виде изображения, недостаточно добавить выбор соответствующего поля в запрос SELECT. В обычном отчете (report) с запросом select employee_id, last_name, photo from employees для поля PHOTO будет сформирована ссылка, по которой можно загрузить соответствующее содержимое Чтобы вместо ссылки добавить изображение, для этого поля необходимо вручную определить HTML-код тега.

23 Ekaterina B. Egorkina,© VEELTECH.RU Формируемый запросом тэг будет иметь следующий вид: Главная задача – получить адрес, по которому через протокол http можно получить изображение. Сформировать адрес позволяет функция APEX_UTIL.get_blob_file_src

24 Ekaterina B. Egorkina,© VEELTECH.RU Синтаксис: APEX_UTIL.get_blob_file_src( p_item_name in varchar2 default null, p_v1 in varchar2 default null, p_v2 in varchar2 default null, p_content_disposition in varchar2 default null) return varchar2; p_item_name – элемент типа FILE на заданной странице, связанный с источником значений для поля BLOB в БД p_v1 – значение первичного ключа данной записи p_v2 – значение второго поля, входящего в первичный ключ (для составного ключа) p_content_disposition – inline или attachment

25 Ekaterina B. Egorkina,© VEELTECH.RU 1. Необходим элемент, являющийся источником данных поля BLOB, где хранится изображение. Это элемент типа File Browse, где источник (Source) задан как Source type: Database Column Source value: PHOTO (поле BLOB,где хранится фото) 2. Необходим элемент, где будет задано значение идентификатора записи. Это элемент типа Hidden, где источник (Source) задан как Source type: Database Column Source value: EMPLOYEE_ID (первичный ключ таблицы)

26 Ekaterina B. Egorkina,© VEELTECH.RU

27 Ekaterina B. Egorkina,© VEELTECH.RU Чтобы сделать невидимым все, что содержится в регионе, в параметрах Header and Footer – заголовок и окончание региона – пропишем специальный html-блок span, скрытый с помощью стилей CSS.

28 Ekaterina B. Egorkina,© VEELTECH.RU Отображение региона без шаблона. В этом случае никаких элементов оформления – рамка, заголовок и т.д. не добавляется.

29 Ekaterina B. Egorkina,© VEELTECH.RU

30 Ekaterina B. Egorkina,© VEELTECH.RU Аналогичны создававшемуся ранее элементу File Browse для формы редактирования.

31 Ekaterina B. Egorkina,© VEELTECH.RU

32 Ekaterina B. Egorkina,© VEELTECH.RU Чтобы в созданных объектах (File Browse и Hidden) появлялись данные из таблицы, необходимо создать для них «источник информации». Таким источником является специальный процесс (Process), выполняющий автоматическое считывание записей (Automated Row Fetch) указанной таблицы по заданному описанию.

33 Ekaterina B. Egorkina,© VEELTECH.RU

34 Ekaterina B. Egorkina,© VEELTECH.RU

35 Ekaterina B. Egorkina,© VEELTECH.RU

36 Ekaterina B. Egorkina,© VEELTECH.RU

37 Ekaterina B. Egorkina,© VEELTECH.RU

38 Ekaterina B. Egorkina,© VEELTECH.RU

39 Ekaterina B. Egorkina,© VEELTECH.RU SELECT …, decode( nvl(dbms_lob.getlength(PHOTO),0),0,null, '' ) as PHOTO FROM EMPLOYEES ' ) as PHOTO FROM EMPLOYEES">

40 Ekaterina B. Egorkina,© VEELTECH.RU

41 Ekaterina B. Egorkina,© VEELTECH.RU

42 Ekaterina B. Egorkina,© VEELTECH.RU