Előnézeti kép feltöltése ajax segítségével
Szerző: Gergő | JQuery | 2010 március 14. 23:32

14 márc 0

Rengetegszer kérik a megrendelők, hogy a formokban a kép kiválasztása után jelenjen meg egy előnézeti kép. Ez a cikk egy lehetséges megoldást kínál erre a problémára.

Nem varázslat, hisz olyan technika nincs ami csak javascript segítségével meg tudná ezt oldani. Ha valaki egy 2 megás képet szeretne feltölteni, akkor az előnézeti kép előállításához is fel kell tölteni egyszer a 2 megát. Után persze már ügyeskedhetünk, hogy ne kelljen még egyszer elküldeni, de az már egy másik történet….

HTML

Egy divünk és egy formunk van. A divben egy alapképet helyezünk el, ennek az “src” attribútuma lesz módosítva feltöltés után.

1.
2.
3.
4.
5.
6.
7.
8.
9.

	<div class="preview">
		<img width="100px" height="100px" src="img/67_128.png" id="thumb">
	</div>
 
	<form action="ajax_kep_feltoltes_upload.php" id="kepFeltoltesForm"><input type="hidden" name="phpMyAdmin" value="da56dea1e0f8990b85cea0a498c5ae43" />
		<label>Válassz egy képet</label>
		<input type="file" size="20" id="imageUpload" class=" ">
		<button class="button" type="submit">Mentés</button>
	</form>

JavaScript

Először hozzárendeljük az eseményt az “imageUpload” inputunkhoz.
Ezután az “action” paraméterben megadjuk hova küldje az ajax a kiválasztott fájlt. Ide beírhatjuk a közvetlen elérési utat is, én most a form action paraméteréből szedtem ki ezt az értéket.
A “name”-be azt a nevet írjuk, amit szerver oldalon a $_FILES[] tömbben fogadni szeretnénk.
onSubmitra a preview divhez hozzáadjuk a loading osztályt, ami egy töltés hátteret rendel hozzá, illetve eltünteti a benne található képet.
onComplete eseményre hozzárendelünk a képünkhöz egy load eseményt, ami “loading” classunkat leveszi a preview div-ről, ha az új képünk teljesen betöltődött.
Végül a kép forrását lecseréljük arra amit a szerver oldali kódunk visszaad.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

$(document).ready(function(){
 
	var thumb = $('img#thumb');	
 
	new AjaxUpload('imageUpload', {
		action: $('form#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('div.preview').addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('div.preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});

CSS

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

.preview{
	float:left;
	height:100px;
	width:100px;
}
	.preview.loading{
		background:url("../img/loading.gif") no-repeat scroll 39px 40px transparent;
	}
		.preview.loading img{
			display:none;
		}
#kepFeltoltesForm{
	-moz-border-radius:5px;-webkit-border-radius:5px;
	background-color:#eee;
	float:left;
	margin:5px 20px;
	padding:5px;
}
	#kepFeltoltesForm label{
		display:block;
		font-size:13px;
		font-weight:bold;
		line-height:18px;
		margin-bottom:5px;
	}
	#kepFeltoltesForm .button{
		-moz-border-radius:5px;-webkit-border-radius:5px;
		-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
		background:url("../img/overlay-button.png") repeat-x scroll 0 0 #222222;
		border:none;
		color:#fff;
		display:block;
		font-size:13px;
		font-weight:bold;
		margin-top:10px;
		padding:5px 15px 6px;
		text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
	}

Összegzés

Szerintem jó dolog, feltéve hogy nem 2 mb-os képeket szeretnénk vele nézegetni… Ha nem tudod megirni magadtól a szerver oldali részét, írj és segítek.

Oszd meg, és uralkodj: