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

reference spletnih strani
« Težave z adobe produkti (Fireworks, Photoshop, …)
Novi prenosnik – HP Compaq 8710p »
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):

PLAIN TEXT
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. }

PLAIN TEXT
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:

PLAIN TEXT
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:

PLAIN TEXT
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:

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

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

PLAIN TEXT
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. AJAX na enostaven način
  4. Javascript – delci uporabne kode
  5. AJAX Gmail indikator – prikaz statusnega okna pri AJAX operacijah
  6. Javascript predogled slike – CSS opacity – picture preview – picture fade
  7. Google AJAX Suggest kopija
  8. PHP funkcije v Javascript jeziku – isset
  9. Shrani datoteko / Odpri datoteko dialog – download center (mime-type, Content-type, Content-Disposition)
  10. Safari podpira predogled PDF-ja skozi IMG tag (inline PDF document support)

Roky || Sunday, March 16th, 2008 ob 11:04 am || Splet, Splet (Javascript, Ajax), Splet (PHP & MySQL) || RSS 2.0 | Dodaj komentar || Trackback


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

  1. Boštjan je napisal:
    March 16th, 2008 ob 7:14 pm

    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:
    March 16th, 2008 ob 7:44 pm

    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:
    March 16th, 2008 ob 8:44 pm

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

  4. Roky je napisal:
    March 16th, 2008 ob 8:55 pm

    .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:
    March 16th, 2008 ob 9:11 pm

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

  6. Roky je napisal:
    March 16th, 2008 ob 9:28 pm

    ni problema, komentarji dobrodošli:)

Dodaj komentar