Ajax upload slike - plugin

Budući da se klasičnim AJAX-om (jQuery naravno) ne može uploadati slika, spremiti na server, te prikazati nekakvom callback funkcijom, u potrazi sam za dobrim i jednostavnim pluginom. Isprobao sam sve što se dalo ‘izgooglati’. Neki su me ugodno iznenadili stvarima koje od tih pluginova nisam očekivao, ali istovremeno razočaraju time što ne podržavaju osnovne stvati. Kada isprobam sljedeći plugin koji koji ima sve što prethodni ne podržava, javi se problem u nečem trećem itd.

jQuery Form Plugin je odličan.
jQuery Form Plugin

Međutim na PHP strani ne mogu upravljati greškama:
Ukoliko je upload (koji je dio forme i nije obavezan) prazan, ne mogu izvršiti submit. npr:

Empty php funkcija također ne radi.
Sa $_POST je sve ok, ali ovaj plugin jednostavno ne ‘hendla’ $_FILES, tako da ne mogu ostaviti prazan, niti raditi bilo kakvu validaciju na serverskoj strani. Ovaj plugin sam na žalost zbog toga otpisao.

Nasuprot jQuery Form, jQupload ( jQuery Uploader | jqframework.com ) nema nikakvih problema sa hendlanjem na serverskoj strani. Sve radi super. Međutim njime ne mogu slati HTML kao output ako koristim JSON. Evo malo prošireni gornji primjer:

Ako iz vrijednosti $msg varijable maknem HTML, odnosno tagove paragrafa, onda je sve u redu.
Primijetio sam da prolaze i posebni znakovi, ali svi osim ‘<’.

E sada…znam da ideja JSON-a i nije da prenosi HTML, nego da postoji rješenje da se JS strane napravi nešto kao:

[HTML]
$(’#errors’).html(’

’+data.slika+’

’);
[/HTML]

Ali imam već napravljenu poveću php skriptu koja ima puno HTML ispisa, poziva funkcije za ispis cijelih formatiranih HTML tablica i hrpu ostalih stvari zbog kojih mi ne pada na pamet da cijeli HTML ispisujem JavaScriptom.

Molio bih vas za pomoć oko odabira odgovarajućeg plugina koji bi riješio ovaj problem ili još bolje ako se stvar nekako može riješiti uz korištenje nekog od ova 2 koja sam naveo. Fine Uploader i ostali koji koriste klase, predefiniranu JS validaciju, upload progres i hrpu nepotrebnih stvari, opcija i nekakvih svojih foldera sam isključio.
Treba mi samo AJAX upload sa callback funkcijom za prikaz uploadane slike i podrška za serversku validaciju iste.

jqupload ce raditi samo stavi opciju JSON_UNESCAPED_SLASHES (PHP 5.4.0)

js funckcija iz jqupload primjera:
[HTML]
function myfunc(return_message){
data = jQuery.parseJSON(return_message);
$("#demo_message").html(data.slika);
}
[/HTML]

To majstore !!!

JSON_UNESCAPED_SLASHES je dosta da sredi stvar.

JS funkciju sam imao:
[HTML]
function myfunc(data){
eval(“data=”+data);
$("#demo_message").html(data.message);
}
[/HTML]

U tom, kao i u tvom slučaju JS funkcije, stvar radi bez problema.
Sada samo još ostaje problem jer na hostingu nemam PHP>=5.4, pa će raditi samo lokalno, ali to je sad drugi par opanaka. Ahhh, šta ćeš, takav je život…nije uvijek lako biti korak ispred vremena. Pffff…hahaha.

Puno ti hvala!
Pozdrav!

Sad sam skužio da ispis slike ipak ne radi. Sa tekstom je sve ok.
Ako umjesto:<span class="syntaxdefault">$msg</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'<p>Prikaz&nbsp;običnog&nbsp;teksta</p>'</span><span class="syntaxkeyword">;&nbsp;</span><span class="syntaxdefault"></span>
stavim:<span class="syntaxdefault">$msg</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'<img&nbsp;src="neka_slika.jpg"&nbsp;width="80"&nbsp;height="100"&nbsp;alt="slika"/>'</span><span class="syntaxkeyword">;&nbsp;</span><span class="syntaxdefault"></span>
…onda nula bodova. Nema ispisa slike, niti teksta iz ostalih elemenata.
:hmmmmmm:

ti želiš da korisnik uploada svoj fajl sa kompa na tvoj server i kad uploada da mu prikazes tu sliku na stranici?

Da. Korisnik uploada sliku na server (ukoliko je zadovoljena validacija na serverskoj strani (dozvoljene ekstenzije i veličina slike)), u bazu upisujem putanju do slike, onda selektiram sliku i ispisujem ju nazad na klijentskoj strani, bez refresha stranice. Probleme sa raznim pluginovima sam objasnio u prvom postu: ne mogu naći dobitnu kombinaciju koja prikazuje klijentu sliku a istovremeno dozvoljava manipulaciju nad $_FILES poljem čime zapravo vršim php validaciju.

Uglavnom problem je na kraju riješen sa jQuery Form Plugin, ipak sam ga uspio natjerati da radi i prikaz slike i validaciju:

Caka je u tome da ako se za prijenos podataka koristi JSON, rezultati validacije se mogu na klijentskoj strani prikazati samo unutar iframe-a. Znači unutar opcija ovog plugina se eksplicitno mora navesti iframe: true. i tada se kompletan ispis mora staviti unutar tagova. Tako funkcionira plugin.

Međutim ako je upload polje prazno, plugin zanemaruje iframe, i koristi klasični XMLHttpRequest. U tom slučaju ne treba textarea pa se desi opet problem parsiranja HTML-a i može se prikazati samo čisti tekst. JSON_UNESCAPED_SLASHES u ovom slučaju ne pomaže.

Rješenje je u ovome:

Na ovaj način server uklanja tagove kada je upload prazan i postavlja ih samo kada je potrebno.

Ovako jednostavno funkcionira ovaj plugin. Sreća da su na sve mislili i sve skupa dobro dokumentirali, za razliku od svih ostalih koje sam isprobao, ovo je jedini način da dobijem što sam zamislio. Pa eto…možda i vama nekad zatreba. Pozz!

[quote=“dpolo”]
Caka je u tome da ako se za prijenos podataka koristi JSON, rezultati validacije se mogu na klijentskoj strani prikazati samo unutar iframe-a. Znači unutar opcija ovog plugina se eksplicitno mora navesti iframe: true. i tada se kompletan ispis mora staviti unutar tagova. Tako funkcionira plugin.[/quote]
Kakav ti je to crni plugin koji MORA koristiti iframe, ccc…

Najbolji u Mliječnoj stazi :doki:!

Ma najbolji ti je ■■■■■ u Mliječnoj stazi, iframe zbog ajaxa? LOL
Evo ti čisti JS bez ikakvog plugina. Ovo je primjer, ti ako trebaš još neke podatke dodaj ih (Piše u kodu kako)

[html]

[/html]

window.onload = function() {
	var image = document.getElementById('upload_file'),
		submit_upload = document.getElementById('upload_submit');
	
	submit_upload.onclick = function(event) {
		event.preventDefault();
		event.stopPropagation();
		
		var img_f = image.files[0];
		
		if(image.files.length > 0 && img_f.size < 2097152) { //Veličina u bajtovima (2097152 = 2MB)
			var ext = img_f.name.split('.');
				ext = ext[ext.length - 1].toLowerCase();
				
			if(ext == 'png' || ext == 'jpg' || ext == 'jpeg' || ext == 'gif') { //Provjeri dali je to zapravo slika!
				var data = new FormData(),
					xhr = new XMLHttpRequest();
					
				data.append('image', img_f); //Dodajemo fajl u varijablu data. Možeš još dodati neke stavke ako hoćeš, npr. data.append('naslov', 'ovo je naslov slike'); i kasnije ćeš u PHP dijelu koristiti $_POST/$_GET ['naslov'] dok ćeš za datoteke koristiti $_FILES u ovom slučaju to je $_FILES['image']
				
				if(xhr.upload) {
					xhr.upload.onreadystatechange = function() {
						if(xhr.readyState == 4) {
							var response = xhr.responseText;
							
							/* Možeš koristit npr: 
								var resp_image = document.createElement('img');
								resp_image.src = response;
								
								document.body.appendChild(resp_image);
							*/
						}
					}
					
					xhr.open('POST', 'putanja do *.php datoteke');
					xhr.setRequestHeader('Cache-Control', 'no-cache');
					xhr.send(data);
				}
			}
		}
	}
}

i sad koristi u php datoteci $_FILES[‘image’] i također provjeri dali je varijabla postavljena odnosno nije prazna i provjeri veličinu i ekstenziju premda nebi trebalo biti problema! Veličinu moraš provjeriti u bajtovima, ukucaj na gugl npr. 2mb to bytes i on će ti izbaciti rezultat u bajtovima

Ma dobio sam sve što je trebalao. Dosta sam vremena izgubio s ovim i ne da mi se više remetiti cijelu koncepciju i eksperimentirati.
Da si se javio s rješenjem prije nego sam riješio problem, to bi bila druga priča. Sada sve radi i to je nabitnije, a kako taj plugin u pozadini funkcionira - baš me briga. Uostalom, u HTML-u uopće nemam iframe, niti ga plugin generira u source kodu pri ispisu. Pa i da ga ima, nebi taj iframe nikoga pojeo. Hvala na trudu u svakom slučaju.

svejedno, nije isto kad koristiš iframe i bez njega. Ja ti preporučam da koristiš moj način jer je efikasniji i brži


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja