ugrás a tartalomhoz

jquery kép feltöltés

Tanul0 · 2009. Szep. 3. (Cs), 12.07
Sziasztok!

Mivel nem nagyon értek a javascripthez, sem az ajaxhoz, végképpnem a jqueryhez ezért kérnék töletek egy kis segítséget

$(function(){
		var btnUpload=$('#upload_button');
		var status=$('#status_message');
		var ukep = "<?php echo $felhID; ?>";
		$('<li></li>').appendTo('#files_list').html('<img src="./img/kicsi/'+ukep+'.jpg" alt="" /><br />').addClass('success');
		new AjaxUpload(btnUpload, {
			action: 'upload-file.php',
			name: 'picture',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
					status.text('%csakjpg%');
					return false;
				}
				status.text('%feltoltes%');
			},
			onComplete: function(file, response){
				//On completion clear the status
				status.text('');
				//Add uploaded file to list
				
				if(response==="success"){
					$('<li></li>').remove('ul#files_list'); 
					$('<li></li>').appendTo('#files_list').html('<img src="./img/kicsi/'+ukep+'.jpg" alt="" /><br />').addClass('success');
					} else{
					$('<li></li>').appendTo('#files_list').text(file).addClass('error');
					status.text('%hibatortent%');
				}
			}
		});
		
	});
Nos a következő a problémám, ha feltöltök egy képet, akkor egy listát készít a script a feltöltött képekről. Én azt szeretném elérni, hogy alapból megjelenít egy képet, amit a user lecserélhet, idáig oké is. De! Amikor a képet sikeresen feltöltötem, akkor el szeretném távolítani, az előző elemet, amit már vagy létezik, vagy éppen előtte töltötte fel. Próbálkoztam, googliztam de nem sikerült megoldást találnom. Nem értem miért nem törli a 
 $('<li></li>').remove('ul#files_list');
az előző elemét a listának, és az újonnan megjelenített kép pedig miért nem frissül mind a két lista elemben. Köszi előre is a segítséget! Megtekinthető itt
‹ Javascript FORM elemek közti kommunikáció IFRAME ›
 ■
1

Sikerült megoldanom

Tanul0 · 2009. Szep. 3. (Cs), 13.01
var elem1=document.getElementById("files_list");
elem1.parentNode.removeChild(elem1);
$('<liy</li>').appendTo('ul#files_list').html('<img src="./img/kicsi/'+ukep+'.jpg" alt="" /><br />').addClass('success');
Mos már csak annyi kérdésem lenne, hogy hogyan tudnám 3 másodpercel bekésleltetni a remove-ot és az append-et

eddig oké hogy:
t=setTimeout("",3000);
Ez elvileg 3mp-t késleltet, de hogyan tudom felhasználni? ebben kérném még a segítségeteket.
2

első paraméter

Drawain · 2009. Szep. 3. (Cs), 13.06
Berakod a remove-ot és az appendet egy függvénybe, és a setTimeout első paraméterének ezt a függvénynevet adod meg.
3

Valahogy így?

Tanul0 · 2009. Szep. 3. (Cs), 13.22
function ujratoltes(){

var elem1=document.getElementById("files_list");
elem1.parentNode.removeChild(elem1);
$('<li></li>').appendTo('ul#files_list').html('<img src="./img/kicsi/'+ukep+'.jpg" alt="" /><br />').addClass('success');

}

setTimeout(ujratoltes(),3000);
ez így nem nagyon akar működni :(
4

google

Drawain · 2009. Szep. 3. (Cs), 13.25
Vagy így:

setTimeout(ujratoltes,3000);
vagy:

setTimeout("ujratoltes()",3000);
5

A késleltetés most már

Tanul0 · 2009. Szep. 3. (Cs), 13.54
A késleltetés most már működik, csak az istennek sem akar új elemet hozzáadni azaz ez a része nem fut le:

$('<li></li>').appendTo('ul#files_list').html('<img src="./img/kicsi/'+ukep+'.jpg" alt="" /><br />').addClass('success');
6

Senki?

Tanul0 · 2009. Szep. 3. (Cs), 16.53
Senki?
7

Hasonló kód nekem simán

Drawain · 2009. Szep. 3. (Cs), 18.24
Hasonló kód nekem simán működik. Egy firebuggal simán ki tudod debuggolni, hogy hol a hiba. Megnézed, hogy megkapod e a $('ul#files_list')-ra az ul-t, stb. Gyanakszom hozzáadja a kért li-t, a képpel együtt is, csak nem látod mert rossz a kép elérési útvonala. Ezt is ellenőrizheted a firebug html fülén.

szerk.: arról nem is beszélve, hogy a függvényben használod az "ukep" nevű változót. Az ugye globális?
8

Firebug kidobta, hogy az

Tanul0 · 2009. Szep. 3. (Cs), 18.41
Firebug kidobta, hogy az egész <ul id="files_list"><li></li></ul> részt törli, nem csak a <li>-t. Tehát a kódom rossz. Hogyan tudnám megoldani, hogy csak az utolsó <li> elemet törölje?
9

jquery doc

Drawain · 2009. Szep. 3. (Cs), 19.00
Tanulmányozd át a jquery dokumentációt, mert nagyon hasznos ilyen esetekben - és van ehhez hasonló példa is benne.

$("#files_list li:last").remove();
10

Megoldottam sokkal egyszerűbben!

Tanul0 · 2009. Szep. 3. (Cs), 19.04
Üdv! Köszönöm a segítségedet Drawain!

Megoldottam egyszerűbben:

$(function(){
		var btnUpload=$('#upload_button');
		var status=$('#status_message');
		var ukep = "<?php echo $felhID; ?>";
		var elem1=document.getElementById("files_list");
		function addoljunk() {
		$('<li><img src="./img/kicsi/'+ukep+'.jpg" alt="" id="regikep"/><br /></li>').appendTo('ul#files_list').addClass('success');
		}
		addoljunk();
		new AjaxUpload(btnUpload, {
			action: 'upload-file.php',
			name: 'picture',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
					status.text('%csakjpg%');
					return false;
				}
				status.text('%feltoltes%');
			},
			onComplete: function(file, response){
				//On completion clear the status
				status.text('');
				//Add uploaded file to list
				
				if(response==="success"){
					
				function kepujra()
				{
				img = document.getElementById('regikep');
				img.src = './img/kicsi/'+ukep+'.jpg?'+Math.random();
				}
				function kepujratolt(){
				setTimeout(kepujra,2000);
				}
				kepujratolt();
				}
			}
		});
		
	});