Blog

HTML5 fájlfeltöltés

Publikálva: 2013.12.02 20:00
HTML5 file upload

Az internet számos megoldást kínál html5 fájlfeltöltéssel kapcsolatban. Van amiért fizetni kell, hogy letölthesd, van amit ingyen megkapsz. Néhányat megnéztem közülük, de mindig volt bennük valami, amiért a használatuk kényelmetlen volt. Túl voltak bonyolítva, és az egyszerű fejleszthetőségük sem volt garantálva. Akadt köztük ami nem volt responsive, volt amit csak képek feltöltésére lehetett használni. És előfordult olyan is, amit egy oldalon csak egyszer lehetett beilleszteni. Nem tétováztam sokáig, lefejlesztettem egy számomra tökéletesen használható alkalmazást fájlok feltöltésére. És ezt most bárki le is töltheti tőlem. Decemberi ajándék!

Próbáld ki és töltsd le!

Nem szeretném forráskódilag nagyon átrágni magam, hisz az internet tele van vele. A forráskód, amit egyébként bárkinek a megoldásánál is nézhetnénk, 75%-ban teljesen megegyezik. Nem is nagyon lehet ezt az aprócska programot máshogy megírni, csak 25%-ban elrontani.

Fájlfeltöltés saját szemszögből

Több szempontot is figyelembe vettem, amikor megalkottam a fájlfeltöltés programom.

  • Az első és legfontosabb, hogy XMLHttpRequest alapokon, ajax elven működjön.
  • Legyen responsive, hogy az admin felületen bárhová elhelyezhető legyen design módosítás nélkül.
  • Működjön mobil eszközökön.
  • Paraméterezhető legyen.
  • Egy űrlapon belül többször is elhelyezhessem eltérő paraméterekkel.
  • Még feltöltés előtt figyelmeztessen, ha túl nagy fájlt akarok feltölteni, vagy a kiterjesztés nem támogatott.
  • Jelenítsen meg a feltöltő információkat a fájlról.
  • Kép feltöltésnél jelenítsen meg egy thumbnail képet a feltöltendő képről.
  • Feltöltés közben jelezze, hogy áll a feltöltési folyamat.
  • Tudjam megszakítani a feltöltési folyamatot.
  • PHP környezetben akarom használni.
  • Későbbiekben fejleszthető legyen multiple és drag&drop üzemmódra. Jelenleg nem találtam fontosnak, de nem szerettem volna kizárni.

HTML5 fájlfeltöltés integrálása

Miután betöltöttük a szükséges css, javascript és php fájlokat, az integrálás roppant egyszerű, néhány sor az egész.

<?php
$h5uData = html5Upload('uniqueID', array(
	'saveCallBack' => 'myAjaxCallBackFuncion',
	'validFiles' => array('jpg', 'jpeg', 'png', 'gif'),
	'maxFileSize' => (1024*1024*2)
));
echo $h5uData['html'];
echo '<script>'.$h5uData['js'].'</script>';
?>

A html5Upload() php függvényt kell csak meghívni. Első paramétere a $fileUID, amiben most a uniqueID, a fájl egyedi azonosítója lesz. Ez fogja lehetővé tenni, hogy egy oldalon belül többször integrálhassuk. Második paramétere egy tömböt vár, ahol hangolható a működése. Ha később több paraméterre lenne szükség, akkor a tömbös adat által könnyen bővíthető. Nem állt szándékomban, hogy minden információt paraméterben adjak át, de kivitelezhető. Jelenleg átadható a fájlok korlátozásához szükséges adatok, a méret és kiterjesztés. Valamint egy ajax hívású javascript függvény neve, ami a feltöltött fájlunkkal fog  a későbbiekben dolgozni. Ebben a függvényben mindenki saját maga programozhatja le, hogy hova mozgassa a fájlt, mi legyen vele a következő munka.

A html5Upload() függvény generálja le a html és a szükséges javascript részt is, miközben a függvény minden adatot elraktároz a $_SESSION['h5uData'][$fileUID] tömbben. A fájl feltöltése után ebbe a tömbbe extra információk is kerülnek, hogy a callBack függvényünkön belül minden adat rendelkezésre álljon. Sikeres fájlfeltöltés után csak ürítsd ki a változót. Ha szükséges a html5Upload() függvényt lehet módosítani, paraméterrel bővíteni. Itt lehet megadni azt, hogy mi legyen az a php fájl ami a feltöltött fájlt fogadni fogja. A feltöltésről JSON választ fogunk visszakapni.

{
	"h5u" :{
		"fileUID" : "uniqueID",
		"status" : "200",
		"message" : "A file sikeresen feltöltve!"
	}
}

Vessünk még egy pillantást a generált javascript kódra is.

var h5u_uniqueID = new html5Upload();
h5u_uniqueID.init({
	'selectorID' : 'html5Upload_uniqueID',
	'uploadPHP' : 'index.php',
	'maxFileSize' : 2097152,
	'validFiles' : 'jpg|jpeg|png|gif',
	'parameters' : {
		'fileUID' : 'uniqueID',
		'h5u' : 'uniquestr'
	},
	'callbackUploadComplate' : function(evt){
		//Végeztem, myAjaxCallBackFuncion dolgozhat tovább a feltöltött fájllal
		var myJson = jQuery.parseJSON(evt.target.response);
		alert(myJson.h5u.message + ' Status: ' + myJson.h5u.status);
	}
});

A legfontosabb rész a callbackUploadComplate. A demóban én ezt visszamódosítottam. Itt célszerű a saveCallBack változó tartalmát generálni, hogy a myAjaxCallBackFunction dolgozhasson tovább.

A további részletekért szolgáljon maga a forráskód. Próbáld ki a demót. Ha tetszik töltsd le és használd. Illeszd be bárhová, responsive.

Próbáld ki és töltsd le!

 

PS: fájlfeltöltés vagy fájl feltöltés?

Végezetül egy kis kitérő érdekesség. Helyesírásból sosem voltam csillagos ötös, de a blog miatt próbálok a szabályoknak megfelelni. A fájlfeltöltés vagy fájl feltöltés helyesírási szabály ismeretének hiányossága elég rendesen megdolgoztatott, talán már jobban foglalkoztatott ez a téma, mint a fejlesztés része.

Általában, ha nem vagyok biztos egy szóban, akkor be szoktam gépelni a google keresőjébe és általában ki is dobja a megfelelő használatot. Viszont ez most nem így volt, mert azonos előfordulással szerepelt a fájlfeltöltés és a fájl feltöltés is. Szívás, teljes a bizonytalanság :)

Végül átolvastam néhány helyesírási szabályt az összetett szavakkal kapcsolatban. Így jött ki nálam győztesen a fájlfeltöltés.

Néhány szabály, észrevétel ami mellette szólt:

  • Nem változik meg a jelentése egybeírva, mintha különírtuk volna.
  • Hat szótagnál nem hosszabb a szóösszetétel.
  • Az utótaggal az előtegra rákérdezhetünk. Milyen feltöltés?
  • A képfeltöltést is egybeírjuk.
  • A PHP Haladóknak Fekete Könyv is egybeírva használja.

Ennyit a fájlfeltöltésről!