Ajax-szerű fájlfeltöltés PHP-val

Zoltan — Tue, 12 May 2009 20:02:19 +0000

Ma elég huzamos ideig törtem a fejem és bújtam a fórumokat mire sikerült találnom egy olyan megoldást, amivel fel tudok tölteni egy fájlt anélkül, hogy frissülne az oldal. Hogy ez miért is kellett? A Kajdócsi Építész Stúdió adminisztrációs felületén dolgoztam és – bár később szántam-bántam, de – azt találtam ki, hogy amikor egy bizonyos bejegyzést – esetünkben munkát – szerkeszt az ember, lehessen “on-the-go” fájlokat feltölteni. Nem akarjuk ugyanis egy külön elküldött form miatt az összes módosítást elveszteni, ugye?

Szóval nekiálltam, hogy akkor megtanulom a jQuery Ajax metódusait, de szerencsére ráakadtam egy nagyon hasznos kis kerülőre. Ezt fogom most megosztani veletek.

Az első és legfontosabb dolog, hogy megértsük a

működését. A form – magyarul űrlap – egy olyan HTML tag, amivel egyszerű kitölthető mezőket tolhatunk a felhasználó arcába, ezzel rákényszerítve, hogy regisztrációkor megadja nekünk a haja színét és a kedvenc parfümének illatát. Ezek közé a mezők közé tartozik a fájl mező is. Az űrlap működése nagyon egyszerű, beillesztésekor megadjuk, hogy milyen módon (method), és hova (action) küldje az információkat, amiket a mezőkben megadtak a felhasználók.

A milyen módon rész POST vagy GET lehet, attól függően, hogy mennyire titkosan akarjuk küldeni az infokat. Elég másként lehet feldolgozni az adatokat, a GET ugyanis a címsorban küldi az adatokat (pl regisztracio.php?felhasznalo=jozsi&jelszo=123456), míg a POST titkosan küldi tovább, de ezért ha használni akarunk egy-két adatot további oldalakhoz, akkor azokat tovább kell vinni valahogy (PHP-nál nagyjából úgy mint ahogy a GET metódus teszi).

Az űrlap hova része a feldolgozó fájl (esetünkben egy PHP lesz), ami kezeli a megkapott adatokat és tárolja vagy továbbküldi.

A formokban betöltött fájlokkal az a baki összesen, hogy azokat PHP-ban nem $_POST és nem is $_GET, hanem $_FILES előtaggal kell feldolgoznunk, hogy jussunk valahova. Ahhoz, hogy megkapjuk a kiválasztott fájlokat, az űrlapnak meg kell adnunk még egy attribútumot, ez pedig az enctype. Az enctype igazából az elküldött adatok titkosításának módja (nem ugyanaz mint a POST/GET), a fájlok feltöltéséhez szükséges értéke pedig enctype=”multipart/form-data”.

Nézzük is akkor hogy mire lesz szükségünk. Lesz egy form, ahol kiválasztjuk a fájlt; lesz egy PHP ami feldolgozza a fájlt; és egy JavaScript ami a vizualizációért felelős. Az űrlap nem lesz túl bonyolult, lássuk csak:

  
    Fájl:

Igazából néhány extra mezőre szükségünk lesz, hogy a JS is jól működjön:

Feltöltés folyamatban...

Mint látjátok bekerült két

bekezdés és egy belső frame, de ez utóbbi el van rejtve (width: 0px, height: 0px;). A keretre azért van szükségünk, mert ha megnézitek, az űrlapunk megkapta target attribútumnak az nevét; magyarán oda fog betöltődni az action=”upload.php”. Ezzel le is lőttem a legnagyobb poént, amivel a fájlfeltöltés AJAX-szerűvé válik. Egy finom kis CSS-t ráhúzunk az oldalra:

#f1_upload_process{
  z-index: 100;
  position: absolute;
  visibility: hidden;
}

Ezzel biztosítottuk, hogy a #f1_upload_process egyelőre láthatatlan legyen, mert majd a JavaScript teszi láthatóvá, a fájlfeltöltés elindításakor. Sok szó esett már a JavaScript részről, nézzük is meg, hogy mit tud. Egyelőre csak a startUpload() függvényt hívtuk meg az űrlap elküldésével. Ez a függvény igazából csak annyit tesz, hogy a már említett #f1_upload_process részt megmutatja nekünk és engedélyezi a form elküldését:

function startUpload(){
  document.getElementById('f1_upload_process').style.visibility = 'visible';
  return true;
}

A hangsúly nem is ezen a függvényen van, hanem a stopUpload()-on, ami a feltöltés eredményét fogja nekünk kiírni. Ezt a függvényt a PHP fájlból fogjuk meghívni majd.

function stopUpload(success) {
  if (success == 1){
    document.getElementById('result').innerHTML = 'Sikeres volt a fájlfeltöltés!>';
  } else {
    document.getElementById('result').innerHTML = 'Hiba történt a feltöltés során!';
  }
  document.getElementById('f1_upload_process').style.visibility = 'hidden';
  return true;
}

A függvényt egy success paraméterrel együtt hívhatjuk meg, ami az eredménynek megfelelő üzenetet dob ki a

bekezdésünkbe. A vizualizációval meg is volnánk, nézzük meg, hogy mi is történik a háttérben. A PHP az űrlapból megkapott fájlt egyszerűen felmásolja a gyökérkönyvtárjába, majd 1 másodperces pihenő után (hogy a nagyon kicsi fájloknál is látszódjon, hogy történik valami ) meghívja a stopUpload() JS függvényt.


    window.top.window.stopUpload(' . $result . ');
   ');

?>

Ezzel tulajdonképpen meg is volnánk. A dolog működik szépen, én is használom, használjátok ti is egészséggel! Ha bármilyen kérdés vagy észrevétel van, jöhet fórumba!

Forrás: ajaxf1.com

zoltanhosszu.com | blog » Ajax

Ajax-szerű fájlfeltöltés PHP-val