T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
16th March

AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg)

Na blogu sem že pisal o iskanju vsebine, kjer smo poiskali rezultate ter le-te dodali v seznam (z dodatnimi informacijami). Pri iskanju datotek je princip podoben. Z AJAX-om poiščemo datoteke, ki ustrezajo danim pogojem, rezultate dodamo v seznam s pomočjo Javascript-a ter jih, ko so izbrane s strani uporabnika tudi prikažemo (predogled). Predogled je možen za različne vrste datotek, v našem primeru bomo uporabili PDF, Jpeg datoteke (mimetype).

Kot generičen pristop za predogled različnih tipov datotek sem uporabil HTML object tag. Ker IE HTML Object tag, ki vsebuje sliko, prikaže kot iframe z drsniki sem za slike uporabil standarden HTML img tag. HTML Img tag bi bil dober tudi za PDF, če bi vsi podpirali predogled (inline document support) PDF-ja skozi img tag, kot recimo Safari brskalnik.

Začnimo z iskanjem. S pomočjo moje standardne AJAX knjižnice pokličemo PHP skripto, ki poišče datoteke na našem FTP-ju (datoteke so Y vsebine, služijo le kot primeri):

JAVASCRIPT:
  1. function preformAJAXSearch(input, extension, category) {
  2.     sendRequest('ajax_files_search.php', 'input='+input+'&extension='+extension, 'filesSearched', 'GET', 'An error occured while trying to preform search. Please inform admin staff.')
  3. }

PHP:
  1. //RM13032008 Preform search and return back XML with elements
  2. $results = populateArrayWithFolderContent('files', $input, $extension);
  3. $elements= count($results);
  4.  
  5. foreach ((array)$results as $result) {
  6.     $info = @getimagesize($result['filepath']);
  7.  
  8.     if (!empty($info)) {
  9.         $width  = ($info[0]> 556) ? 556 : $info[0];
  10.         $height = ($info[1]> 400) ? 400 : $info[1];
  11.     } else {
  12.         $width  = 556;
  13.         $height = 400;
  14.     }
  15.  
  16.     $text .= '
  17.     <suggestions>
  18.         <filepath>'.htmlspecialchars($result['filepath'], ENT_QUOTES).'</filepath>
  19.         <filename>'.htmlspecialchars($result['file'], ENT_QUOTES).'</filename>
  20.         <mimetype>'.$result['mimetype'].'</mimetype>
  21.         <width>'.$width.'</width>
  22.         <height>'.$height.'</height>
  23.     </suggestions>';
  24. }
  25.  
  26. $text = '
  27. <respond>
  28.     <search_input>'.$input.'</search_input>
  29.     <elements>'.intval($elements).'</elements>
  30.     '.$text.'
  31. </respond>';
  32. echo $text;

Vse datoteke, ki ustrezajo pogojem (ime datoteke, vrsta datoteke) dodamo v tabelo, nato se po tabeli sprehodimo in dodamo še attribute za velikost (velikost naj ne bi bila večja od 556*400, saj bi s tem pokvarila izgled iskalnika oz. predogleda). Ker object tag potrebuje mimetype informacijo, uporabimo vnaprej defenirane vrste datotek, le-to dodamo pod XML rezultat. Funkcijo, ki skrbi za iskanje po datotekah si lahko ogledate spodaj pod pripetimi datotekami.

Dobljene rezultate dodamo v seznam (HTML select), skupno z nekaj dodatnimi informacijami:

JAVASCRIPT:
  1. var width           = request.responseXML.getElementsByTagName('width')[i].firstChild.data;
  2. var height          = request.responseXML.getElementsByTagName('height')[i].firstChild.data;
  3. var mimetype        = request.responseXML.getElementsByTagName('mimetype')[i].firstChild.data;
  4. var filename        = request.responseXML.getElementsByTagName('filename')[i].firstChild.data;
  5. var filepath        = request.responseXML.getElementsByTagName('filepath')[i].firstChild.data;
  6.  
  7. var option          = document.createElement("option");
  8. option.text         = filename;
  9. option.value        = filepath;
  10. option.width        = width;
  11. option.height       = height;
  12. option.title        = mimetype;

... ter prvo datoteko označimo kot izbrano (atribut selected) in tudi aktiviramo predogled te datoteke:

JAVASCRIPT:
  1. if (i == 0){
  2.     setSelectedIndex(select, filepath);
  3.     previewPicture();
  4. }

Pri seznamu datotek (HTML select) dodamo naj se ob spremembi izbrane opcije ali na klik katerekoli opcije (HTML option) pokliče previewPicture() funkcija:

HTML:
  1. onclick="previewPicture();" onchange="previewPicture();"

Poglejmo si še del previewPicture() funkcije, ki kreira object tag ali IMG tag, odvisno od vrste datoteke:

JAVASCRIPT:
  1. if (mimetype == 'image/jpeg') {
  2.     picturePreviewDiv.innerHTML = "<img style=\"border: 0px\" width=\""+width+"\" height=\""+height+"\" src=\""+filepath+"\" alt=\"Datoteke: "+filename+" ni bilo moč najti.\" />";
  3.     return;
  4. }
  5.  
  6. picturePreviewDiv.innerHTML = "<object data=\""+filepath+"\" type=\""+mimetype+"\" width=\""+width+"\" height=\""+height+"\">Datoteke: "+filename+" ni bilo moč najti</object>";

Datoteke:

Dodatne informacije:

P.S: Pri iskanju zaradi preprosti upošteva iskalni niz le ko je izbrana tudi vrsta datoteke.

Delodajalec: KMAG d.d.

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. AJAX iskanje in dodajanje v seznam (select) z dodatnimi informacijami
  2. Predogled PDF-ja – pretvorba PDF v jpeg s pomočjo PHP-ja
  3. Safari podpira predogled PDF-ja skozi IMG tag (inline PDF document support)
  4. PHP setlocale (seznam držav in kode le-teh)
  5. AJAX na enostaven način
  6. Javascript – delci uporabne kode
  7. Javascript predogled slike – CSS opacity – picture preview – picture fade
  8. AJAX Gmail indikator – prikaz statusnega okna pri AJAX operacijah
  9. Google AJAX Suggest kopija
  10. PHP funkcije v Javascript jeziku – isset

6x komentirano na “AJAX iskanje datotek, dodajanje v seznam ter predogled le teh (PDF, jpeg)”

  1. Boštjan je napisal:

    Neke silne uporabnosti lih ni, pa še precej počasi se odziva ajax... mogoče bi lahko izboljšu tko da če je vnosno polje prazno, da nebi klical ajax zahteve...

  2. Roky je napisal:

    Same datoteke se nalagajo malce počasneje ker so drugače zelo velike (wallpaper - 1280x1024 ali več). Pri odzivnosti veliko doda tudi, da gremo skozi celoten folder in pregledujemo datoteke ter dobimo še informacijo ven z getimagesize. Se pa strinjam, da bi se dalo marsikaj naredit.

    Samo hitrost lahko prodaš tukaj, kjer je brez iskanja po FTP-ju in dobivanju informacij o dodatekah zadeva veliko hitrejša (čas meri od takrat ko začne iskat, ker čaka 600ms da uporabnik neha tipkat - pri vseh treh AJAX primerih je tako):

    http://trsplet.com/blog/wp-content/uploads/2008/03/ajax_iskanje_dodajanje_v_seznam.html

    Prazno polje se upošteva kot "dobi vse" in je bil zaželejen feature, je pa res da bi bilo boljše in manj potratno, kot recimo tukaj:

    http://trsplet.com/blog/wp-content/uploads/2008/03/ajax_iskanje.html

    Uporabnost je relativna stvar. Pri KMAG-u kjer smo to uporabili pride zelo prav. Med 10000 datotekami je zelo težko izbrati tisto, ki iščeš, z iskanjem in predoglem je to veliko hitreje kot karkoli drugega. Med 10 datotekami pa nima smisla tega dodajat kot si sam rekel.

  3. Boštjan je napisal:

    aja edin tole mi ni jasn... zakaj je una datoteka v .inc formatu??

  4. Roky je napisal:

    .inc, zato da server ne izvede php skripto, ampak prikaže kot text, tako da lahko vidite kodo. Če date v php-ju include ('xyz.inc'), pa tut dela.

  5. Boštjan je napisal:

    no sj to vem da dela .inc, samo ni mi blo čist jasn :) no dobr, sm zakluču.

  6. Roky je napisal:

    ni problema, komentarji dobrodošli:)

Dodaj komentar