Динамическое отображение BLOB - PullRequest
       8

Динамическое отображение BLOB

0 голосов
/ 20 сентября 2011

Недавно я работал над довольно скромным приложением, в котором перечислены контакты. Когда щелкают ссылку-ссылку, появляется всплывающее окно с более подробной информацией и изображением этого контакта. Таблица, на которой это основывалось, содержала столбец photo_reference, который содержал путь к папке в / i /. С этой настройкой было легко получить изображения, работающие для каждого контакта. Показанное мною всплывающее окно представляло собой набор html-кода, который я поместил в нижний колонтитул региона и спрятал.

<div id="contact_popup" class="contact_pop">
   <div class="contact_pop_imgcontainer">
      <img id="id_photo" class="contact_pop" />
   </div> 
</div>

Когда щелкнули детали, я получил данные через процесс приложения и показал модальное диалоговое окно этого контейнера.

Теперь область действия изменилась: пользователи должны иметь возможность загружать свои собственные изображения. Итак, я пошел на работу и сделал так, чтобы изображения загружались в wwv_flow_files, а затем я перемещаю их в новую таблицу contact_image. Все идет нормально. Но сейчас я хочу показать эти картинки, и здесь я застрял. * Я мог бы включить столбец в свой IR, и наложить маску в формате BLOB с изображением. У меня это работает, но досадно. Моя таблица изображений имеет в качестве первичного ключа поле «ID». Моя таблица контактов также имеет «ID» как PK. Поскольку IMAGE:APXT_CONTACTS_IMG:SMALL_PHOTO:ID::::::inline: указывает идентификатор в качестве PK, он использует идентификатор из моей таблицы контактов. Моя ссылка между таблицами APXT_CONTACTS.CONTACT_IMAGE_ID -> APXT_CONTACTS_IMG.ID. Способ, которым я мог бы заставить это работать, состоит в том, чтобы переименовать мое поле идентификатора в таблице изображений к contact_image_id. (почему нельзя форматировать маску, просто возьмите в качестве значения столбец, на котором она основана :(). Затем я могу скрыть столбец и взять изображение с JavaScript, чтобы показать в моем всплывающем окне. Тем не менее, это предварительно загружает все изображения для количества выбранных строк, что не совсем плохо, но я сначала ищу альтернативу.

  • get_blob_file_src также кажется мне бесполезным из-за ограниченного использования параметров (элемент просмотра файла, поле id), и даже тогда, могу ли я использовать это через обратный вызов ajax?

  • Я бы предпочел получить изображение с помощью ajax, чтобы потом отображать его в моем всплывающем окне, но я понятия не имею, как это сделать. Я сделал хранимую процедуру, которая получает файл для загрузки и вызывает его из процесса приложения (обратный вызов ajax), и с помощью firebug я могу увидеть сообщение / ответ, но я не знаю, как отобразить это как изображение .

Javascript:

function cimg(){
   var get = new htmldb_Get(null, &APP_ID., "APPLICATION_PROCESS=get_img", &APP_PAGE_ID.);
   get.addParam('x01', 25);
   var greturn = get.get();
   alert(greturn);
   var pic = new Image();
   pic.onload = function(){
      document.body.appendChild(pic);
   };
   pic.src = greturn;
};

Процесс страницы:

begin
   show_small_photo(apex_application.g_x01);
end;

Хранимая процедура:

create or replace procedure "SHOW_SMALL_PHOTO"
(p_contact_image_id IN NUMBER)
is
   v_mime      apxt_contacts_img.mime_type%type;
   v_length    NUMBER;
   v_filename  apxt_contacts_img.filename%type;
   v_lob       BLOB;
begin
    SELECT mime_type, lengthb(small_photo), filename, small_photo
    INTO v_mime, v_length, v_filename, v_lob
    FROM apxt_contacts_img
    WHERE id = p_contact_image_id;

    OWA_UTIL.mime_header (NVL (v_mime, 'application/octet'), FALSE);

    HTP.p ('Content-length: ' || v_length);
    -- needed?
    --HTP.p ('Content-Disposition: attachment; filename="'||v_filename||'"');
    OWA_UTIL.http_header_close;
    wpg_docload.download_file (v_lob);
end;

(Я бы предпочел не предоставлять исполнению public и вызывать хранимую процедуру по ссылке.) Таким образом, мне нужно было загружать только картинки по ссылкам. Хотя этот код не работает. Я получаю предупреждение и вижу кучу этих странных персонажей, так что я предполагаю, что это болтовня. Но я нигде не получаю изображение.

Я что-то упустил? Делать что-то не так? Я совершенно не в курсе.

Вместо моего существующего кода я мог бы заставить эту работу создать другую страницу и перетаскивать элементы страницы и их значения, чтобы попытаться создать такой же макет, а затем получить эту страницу через ajax? В основном я пытаюсь свести к минимуму влияние (= работы) на существующее приложение, поэтому мне не придется снова менять страницы.

TL; DR: возможно ли получить и отобразить блоб изображения из таблицы, отсутствующей в запросе отчета, предпочтительно через ajax?

Это Apex 4,02 на 11 г дБ

Спасибо, Том

Ответы [ 3 ]

2 голосов
/ 21 сентября 2011

Для кого это может касаться, вот как я решил / обошел это:

Я пошел по маршруту fetch-another-page.Может быть, я был слишком техническим или слишком сложным в своей работе, но, оглядываясь назад, я думаю, что я мог бы свести его к следующему: «получить изображение с помощью ajax и показать его».Так что, если это кому-нибудь звонит, дайте мне знать.

Некоторые исправляют тоже: моя таблица изображений является дочерней по отношению к таблице контактов, поэтому мой FK между ними - images.contact_id -> contact.id

Я создал новую страницу в своем приложении и поместил форму, основанную на моей таблице изображений.Я отображаю только 2 элемента типа «отображаемое изображение» (эскиз и размер оригинала) и 2 скрытых элемента: «ID» и «CONTACT_ID».Я удалил все, что не было необходимости: ни кнопок, ни DML-процессов, ни ярлыков, ни шаблонов.Процесс автоматической выборки строк принимает в качестве «первичного ключа» мой контактный идентификатор, поэтому я могу вызвать страницу с contact_id в URL (чтобы мне не пришлось делать дополнительный выбор, чтобы получить правильный идентификатор в таблице изображений).Page120: form page for fetching

На странице, где мне нужны фотографии, я получаю страницу с фотографиями, когда это необходимо (т. Е. Когда нажимается значок детализации, и я показываю свое всплывающее окно).В этой функции вызывается следующий фрагмент кода (здесь только код «отсутствует», где я вызываю другой процесс страницы для получения контактных данных в формате json)

//page 120 only holds the 2 images for a contact. Due to images being in
//blobs and no easy way to dynamically fetch them, i made a small
//form with the 2 photos on, and id + contact_id
//(contact_id made PK for the ARF-process, since this is what is worked with)
//The page is pulled in, and the photos retrieved

//htmldb_get does not do the job! It only pulls the page from cache, which isnt what i want

// arrays with the arguments and their values for the post
var vArgs = new Array();
var vVals = new Array();

vArgs.push("P120_CONTACT_ID");
vVals.push(cid);

$.post('wwv_flow.show', 
       {"p_request"      : "NULL",
        "p_flow_id"      : $v('pFlowId'),
        "p_flow_step_id" : "120",
        "p_instance"     : $v('pInstance'),
        "p_arg_names"    : vArgs,
        "p_arg_values"   : vVals}, 
       function(data){
         var oContainerSmall = $("#id_photo_container").empty(),
             oSmallPhoto = $(data).find("#P120_SMALL_PHOTO").attr({"id":"id_photo",
                                                                   "alt":oContact.lastname + " " + oContact.firstname}),
             oLargePhoto = $(data).find("#P120_LARGE_PHOTO").attr("alt",oContact.lastname + " " + oContact.firstname);

         $("#large_photo_container").empty().append(oLargePhoto);
         $("#large_photo_container").css({"display": "block", "visibility": "hidden"});

         //Why remove and remake the container? 
         //for some reason i couldn't find out, the image width and height get reset to 0 after 
         // an initial display of the enlarged picture and closing its dialogbox.
         //I assume it is an apex+css+javascript issue.
         //The only fix i was able to find was to remove the div and remake a new one.
         // There have to be some properties set on the div and/or its children through
         // the closing of the popup dialog (for the larger picture), 
         // which then prevents subsequent calls to get the correct values.
         $("#large_photo_container").remove();
         var oContainerLarge = $("<div></div>").attr("id","large_photo_container").css({"display":"block", "visibility":"hidden"});
         oContainerLarge.append(oLargePhoto);
         $("body").append(oContainerLarge);

         //Hardcoded value here! Adapt when necessary
         if($("#id_contact_type").val() == "Conference Room"){
            var oLink = $("<a/>").attr("href", "#")
                                .click(function(event){
                                         explode_headshot(event, this);
                                       });
            oContainerSmall.append(oLink.append(oSmallPhoto));
         } else {
            oContainerSmall.append(oSmallPhoto);
         };

         $("#contact_popup").dialog({modal: true,
                                     width: 750,
                                     resizable: false, 
                                     title: oContact.lastname + " " + oContact.firstname,
                                     close: function(event, ui){
                                       $("#id_photo").attr({"src": "", "alt": ""});
                                    }});
      });

Я бы не назвал его идеальным,но это работает, и это все, что мне нужно в данный момент:)

0 голосов
/ 24 сентября 2011

Я сделал очень похожее приложение для отображения контактных данных, включая фотографии, несколько месяцев назад в apex.

Я нашел эту веб-страницу очень полезной:

http://blog.hilandco.com/2010/05/how-to-show-blob-type-column-as-image.html

0 голосов
/ 20 сентября 2011

Отображение изображения может быть так же просто, как создание элемента типа: «Показать изображение».Настройки: «Столбец BLOB-объекта, возвращаемый оператором sql».

И затем SQL-оператор, выбирающий правильную строку:

выберите blob_content из my_bitmap_table где ID = ...

...