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 <form> 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:
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" >
Fájl: <input name="myfile" type="file" />
<input type="submit" name="submitBtn" value="Upload" />
</form>
Igazából néhány extra mezőre szükségünk lesz, hogy a JS is jól működjön:
<body>
<p id="f1_upload_process">Feltöltés folyamatban...</p>
<p id="result"></p>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
Fájl: <input name="myfile" type="file" />
<input type="submit" name="submitBtn" value="Feltöltés" />
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0px; height:0px; border:0px;"></iframe>
</body>
Mint látjátok bekerült két <p> bekezdés és egy <iframe> 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 <iframe> 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 = '<span class="msg">Sikeres volt a fájlfeltöltés!</span>>';
} else {
document.getElementById('result').innerHTML = '<span class="emsg">Hiba történt a feltöltés során!</span>';
}
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 <p id=”result”> 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.
<?php
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
if(move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
echo('<script language="javascript" type="text/javascript">
window.top.window.stopUpload(' . $result . ');
</script> ');
?>
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
Tagek: Ajax, CSS, fájl, feltöltés, form, html, javascript, PHP, űrlap
Hmm nagyon tetszik! Ezt ki fogom próbálni, pont szükségem volt egy ilyen szkripre::))