Ajaxovy upload obrazku a vykresleni jeho nahledu?

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
tomasnikl
Člen | 137
+
0
-

Ahoj,

chci se zeptat, neresilo se zde uz neco podobneho? zatim nic takoveho dohledat nemuzu, takze pokud nekdo budete vedet o tematu, kde se problem resil, budu rad kdyz me nasmerujete.

Jde o to, ze mam velmi jednoduchy formular pro upload jedne fotografie (formular obsahuje input pro vyber souboru a textareu pro popis obrazku). Melo by to fungovat tak, ze pri vyberu souboru (pokud je to obrazek) se ajaxem provede upload do nejake temp slozky a po uploadu se zobrazi nahled obrazku v nejakem divu na strance. mezi tim nez se upload provede a vykresli se nahled nahraneho obrazku uzivatel muze a nemusi vyplnit do textarey popis obrazku. Pokud je vse OK, uzivatel formular odesle tlacitkem ulozit a obrazek se z temp slozky presune napr do slozky /content/images/ a ulozi do databaze s popiskem.

Neresilo se zde tedy jiz neco podobneho? nebo neexistuje na to nejaky plugin? Jde mi predevsim o to, jak resit ajaxovy upload obrazku napozadi a po uploadu vykresleni nahledu na strance.

Dekuji za tipy ;)

newPOPE
Člen | 648
+
0
-

http://jquery.malsup.com/form/#…

Ale bacha, v sucasnosti nejde odoslat subor ajaxom (len tusim v novych browseroch). Ten plugin to riesi vsetko za teba o nic sa starat nemusis. Akurat sa to posiela na pozadi POSTOM do iframu.

pawouk
Člen | 172
+
0
-

No tak to ses trefil do celkem sloziteho prikladu.

  1. ajaxove uploadovani souboru bohuzel nejde (http to neumi). Musis to tedy vyresit nejakou alternativou. Ja jsem to vyresil pomoci uploadify coz mohu doporucit, ale variant existuje spousty. Do uploadify ovsem musis zadat cestu kam se to ma ukladat. Coz me prsislo nejjednosusi ukladat si do data-atributu u toho file uploadu. Uploadify totiz nahradi prave klasicky fileUpload. No a pak jsem si pres jQuery.data vytahnul cestu tempu z data-atributu a tam nahral ten obrazek.
  2. jezne ted prichazi druhy problem. A to je prekresleni casti formulare prez snippet. To totiz nejde. Tedy jde ale dosti nečistě. Mě tedy přišlo čistejší udělat to tak, že co ajaxupload to formulář. A snippetem překresluji celý formulář. Toto řešení také není ideální, ale nic lepšího mě nenapadlo. Tedy respektive napadlo a zrovna na tom pracuji, ale nevím kdy to dodělám.
  3. Toto už je jen takový bonus co to bude dělat až dodělám ten muj ajaxupload. Pri ajaxovem posilani obrazku je totiz ten problem, ze potrebujes vyvolat akci uz pri nahrani a ne az po odeslani formulare. Tedy to ze se nahraje obrazek ti vetsinou nestaci (potrebujes totiz jeste prekreslit snippet apod.) Takze syntaxe budoucnosti bude vypadat asi takto:
$this->addUpload()
	-setAjax(callback(...))

Do callbacku dáš funkci která se zavolá při ajaxovém nahraní souboru. Takže jestli nespěcháš tak tohle by mělo být hotové cca do 14 dnů v doplncich. Jinak jak jsem psal 1 a 2. Pokud někdo zná lepší řešení rád si ho vyslechnu…

Editoval pawouk (10. 12. 2011 12:05)

22
Člen | 1478
+
0
-

@pawouk: ad2) a o iframe si uz slysel?

tomasnikl
Člen | 137
+
0
-

dekuji za tipy, zkusim to otestovat, snad pochodim :o)…

jinak ohledne doplnku do 14ti dnu. To je bohuzel dlouha doba, musim to mit doresene do pristiho tydne :o) ale treba vytvoreny doplnek pouziji nekdy v budoucnu. Kazdopadne dekuji za rozsahly popis ;)

tomasnikl
Člen | 137
+
0
-

newPOPE napsal(a):

http://jquery.malsup.com/form/#…

Ale bacha, v sucasnosti nejde odoslat subor ajaxom (len tusim v novych browseroch). Ten plugin to riesi vsetko za teba o nic sa starat nemusis. Akurat sa to posiela na pozadi POSTOM do iframu.

tak koukam na ten jejich priklad a moc mi to z toho neni jasne jak implementovat. Nemas cirou nahodou nekde jiz vlastni ukazku reseni abych se inspiroval?

//edit: tak uz se mi to nejspis povedlo rozchodit, jdu to otestovat poradne :)

Editoval tomasnikl (10. 12. 2011 13:56)

pawouk
Člen | 172
+
0
-

@22: presne tomu bych se rad vynul.

22
Člen | 1478
+
0
-

@pawouk: kvůli čemu?

pawouk
Člen | 172
+
0
-

@22: Iframe se snažím použít až jako opravdu poslední variantu, stejně jako flash. Prostě až když jiná varianta není. Je spousty důvodů proč nepouživat rámy (google) a jen málo důvodů proč je používat. Netvrdím že by to nešlo, jen říkám že pokud je jiná možnost, vždy jí upřednostním.

Editoval pawouk (10. 12. 2011 22:48)

22
Člen | 1478
+
0
-

@pawouk: na co me odkazujes, tak hned prvni link pouze uvadí jedno proti a to sice navigace, coz me jaksi pri uploadu souboru netrapi a nevim, jak by jsi chtel napriklad v php udelat pseudo ajax upload bez iframe, kdyz nechces pouzit napr. flash.

Takze se zeptam znova kvuli cemu? Mrak veci jede v iframu, pokud si treba vzpomenu na Google+1, like button atd. Takze me jen ciste ze zvedavosti zajima, proc je iframe pro tebe spatny?

Editoval 22 (10. 12. 2011 23:07)

tomasnikl
Člen | 137
+
0
-

ja se setkal s tim ze nejaky plugin ve firefoxu pro blokovani reklam v defaultu blokoval i iframy :) to je pak neprijemne… dal blokoval css tridy, ktere zacinali na .ad*… coz je taky dost stupidni..

ale chtel jsem napsat kvuli necemu jinemu… a to ohledne jednoho dotazu.

Ajaxove odesilani souboru mi jiz funguje s pouzitim link

ale resim jeden problem a to:

pokud nahravany obrazek presahne nejakou predem definouvanou velikost (napr 4MB) tak jakym zpusobem do sablony tuto informaci predat… jelikoz po ajaxovem requestu (po nahrani obrazku) predavam zpet do sablony cestu k nahranemu obrazku a tento obrazek zobrazuju v sablone jako nahled. Pokud ovsem dojde k chybe (napr nahrany soubor neni obrazek, nebo je prekrocena velikost) tak mi javascript vytuhne, jelikoz json s daty o obrazku neni zpet do sablony predan.

v metode submit (odeslani formulare) overuji:

public function submitted(UI\Form $form)
	{
		if ($form->isSuccess()) {
			// zmensim, ulozim obrazek a odeslu json s daty o obrazku
		}
}

a kdyz jsem zkousel:

public function submitted(UI\Form $form)
	{
		if ($form->isSuccess()) {
			// zmensim, ulozim obrazek a odeslu json s daty o obrazku
		}else{
			// zde poslu json s nejakou chybou...
		}
}

tak se to v else vubec neprovedlo… jednoduse receno, pokud obrazek presahl danou velikost, tak nette vubec neskocilo do metody submitted..

Editoval tomasnikl (10. 12. 2011 23:56)

pawouk
Člen | 172
+
0
-

@22: Priznam se ze odkazy ktere jsem pridal do predchozi reakce jsem nestudoval, ale prislo mi dostatecne nahled na vysledky, takze je mozne ze v prvnim prispevku je clanek o navigaci…nevím. Ale pryč od google. google +1, facebook likeit, vimeo, youtube atd… to vse funguje na iframe. Proc? Protoze to je proste jiny web. Jina stranka a ta nema s tou moji nic spolecneho. Bohuzel musim i pro ajaxove uploadove nahravani obrazku pouzivat uploadify, coz me taky dost vadi, ale bohuzel je to v soucasnosti nejlepsi varianta (z meho pohledu). Ale to o iframe neplati. Pokud existuje klasicka varianta dam prednost jine. Moc nechapu vas dotaz. Ptate se proc nechci pouzit iframe? Odoved zni.. protoze to neni nutne a jde to „klasickym“ zpusobem. To je to same jako bych se vas zeptal ja proc nepisete kazdy odstave do jednoho iframu. Odpoved by byla asi stejna: protoze to neni nutne. Tak ja se taky zeptam jestli neva :-) Proc bych mel bezduvodne rozsekavat stranku do iframu kdyz nemusim?

pawouk
Člen | 172
+
0
-

@tomasnikl: ja moc nechapu kde overujes ty data. Velikost apod. Pokud bys to overoval rucne tak bys to overoval a v metode submitted, coz teda asi nedelas kdyz ti to tam nedojde, takze to asi resis nekde driv. A neoverujes teda tyhle parametry nahodou jeste pred odeslanim formulare?

srigi
Nette Blogger | 558
+
0
-

Pozeram, ze stale vladne presvedcenie, ze AJAX nevie upload suborov. Doporucujem aby ste sa pozreli na XHR2 a FileAPI. Tie umoznuju urobit cisto JS/AJAX upload suborov.

Elijen
Člen | 171
+
0
-

Me osobne take nenapada duvod, proc nepouzit iframe, pokud neexistuje jine cistsi reseni (pouziti flashe a java appletu mi neprijde prilis ciste).

pawouk napsal(a):

Iframe se snažím použít až jako opravdu poslední variantu, stejně jako flash.

Uploadify pouziva flash.

Editoval Elijen (11. 12. 2011 20:17)

newPOPE
Člen | 648
+
0
-

srigi napsal(a):

Pozeram, ze stale vladne presvedcenie, ze AJAX nevie upload suborov…

Ano vie, nie je to nic zlozite mam pocit ze je tam este ALE. co s IEs (skusal som aj dev preview 10 a stale sa nejak nechyta :-( )

Patrik Votoček
Člen | 2221
+
0
-

Co se týká HTML5 FileAPI a IE tak bude součástí IE10 a dá se přidat i do IE9