ugrás a tartalomhoz

Gombra kattintva képváltás.

rokkok · 2006. Dec. 14. (Cs), 22.02
Sziasztok!

Kérdésem a következő. Utána néztem a neten annak, hogy létezik-e olyan script ami egy egyszerű gombra kattintással, egy képet tesz be a gomb helyére. Egy feltöltő formról van szó, és a gombot kattintásra, egy indikátor gif váltaná le. A weblabort láttam az utolsó mentsváramnak, mert erre konkrét példát nem találtam. :( Létezik-r olyan OnClick parancs, vagy javascript lekérés ami ezt megoldaná. A feltöltés befejeztével egy másik oldal tudatja a feltöltővel, hogy sikeres vlt a feltöltés. Jelenleg csak, olyan megoldást találtam ami textet cserél kattintásra. Tehát csak a gomb feliratát váltja.

Válaszokat előre is köszönve: rokkok
‹ XHTML oldalak összehangolása Dramweaver 8-ban JavaScript egyik helyen működik másol meg nem ›
 ■
1

background-image

jano82 · 2006. Dec. 15. (P), 00.00
A megoldást majdnem megtaláltad, csak egy picit kell módosítani.

A gomb onclick eseményéhez redelsz egy függvény, ami getElementById-vel pl
létrehozza a gomb objektumát, aminek a style tulajdonságát többek között
background-image: url("kepek/akarmi.re"); állítod.

Arra viszont gondolnod kell, ha a gomb megnyomásával a formot el is küldöd,
(persze hogy elküldöd) akkor a lap újratöltődik, és az egészből nem sokat
fogsz látni. Akkor érdemes lehet inkább egy button-t betennek az input type
submit helyett, és egy javascript függvénnyel elküldened a formot 1-2 mp
várakozás után. Ez a fv lehetne egyben az is, amivel a gomb hátterét beállítod.
2

köszi

rokkok · 2006. Dec. 15. (P), 11.42
jano82!

Köszi a választ. Nagyjából értem, hogy mit szeretnél mondani.:) De sajna csak nagyjából. próbálkozom, hátha valami kisül belőle. Amikor a gombra kattintanak az a cél, hogy elküldjék. A másik, hogy több megabájtos feltöltésekről van szó, tehát percekig is bámulják, így már látják a dolgot. :)
3

persze, hogy persze

amonrpg · 2006. Dec. 15. (P), 16.42
Csinálsz egy hidden IFrame-t, egy formot, ami a hidden IFrame-be postol, a submit gombot eltünteted amikor onsubmit van (document.getElementById('submitbtn').style.display='none';), csinálsz egy képet is, ami a gif-et tartalmazza, de style='display:none' -nal, onsubmitnál megjeleníted a képet.
Amikor az iframe-ben feltöltődik a cucc, ki kell adnod egy js-t, ami a parent-window-ban lévő gombot megjeleníti, a képet eltünteti, és mondjuk kiírja, hogy oké volt a feltöltés, vagy sem.

(ps.: szándékosan nem írtam konkrét kódot, mert most nem tudnám tesztelni, fals-ot meg nem akartam adni.)
Remélem az elv elég volt.
4

Itt tartok.

rokkok · 2006. Dec. 16. (Szo), 12.50
Megfontolandó amonrpg amit ajánlottál. Jelenleg itt tartok a dologgal,DE még nem megy. :D Az okát keresem.

<script type="text/javascript">
function kepcsere() {
var a = document.GetElementById ("gomb");
a.style.display = "none";
var b = document.GetElementById ("feltolt");
b.style.display = "block";
}
</script>
<input id="gomb" class="f-gomb" type="submit" name="gomb" value="Feltölt" onSubmit="kepcsere();" /><img id="feltolt" src="img/feltolt.gif" style="display: none;" />
5

html tageket rendesen használd....

amonrpg · 2006. Dec. 18. (H), 10.22
A submit tipusú inputnak sincs onsubmit eseménye. Az a form-nak van, tedd formba a cuccot, amit ráadásul be kell küldeni targettel egy hidden iframe-be, ahhoz, hogy elérd, amit szeretnél. Mivel muszáj targetet adni a form-nak, így maximum XHTML 1.0 transitional-t tudsz használni, majd erre is figyelj! ;)
Amúgy nem tűnik rossznak.
6

Akkor html-re fel. :)

rokkok · 2006. Dec. 18. (H), 11.29
Köszi amonrpg!

Természetesen mindez formban van, ez csak egy töredéke a kódnak, csak a többi részét nem tartottam fontosnak, hogy kiírjam. Ezt a lehetőséget is megpróbálom, és jelzem, ha valamivel elakadnék. :)
7

feltöltés háttérben iframe-el

toxin · 2006. Dec. 25. (H), 18.54
na hogy karácsonykor van végre némi időm az érdekes problémákra (meg éppen itt tartok egy feladattal ) ültessük át a gyakorlatba ;)

index.html tartalmazza a formot, és a két használható eseménykezelőt, egyik felküldés előtt, másik felküldés után futhat le

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script src="js/prototype.js" type="text/javascript"></script>
		<script src="js/builder.js" type="text/javascript"></script>
		<script src="js/uploader.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			window.onload = function(){
				new Uploader({form:'file_uploader',beforeStart:beforeStart,afterFinish:afterFinish});
			}
			
			function beforeStart(){
				Element.update('info','start uploading ' + $('file').value);
			}
			
			function afterFinish(response){
				Element.update('info',response);
			}
		</script>
	</head>
	<body>
		<form id="file_uploader" action="index.php" method="post" enctype="multipart/form-data" >
        <div><label>Name:</label> <input type="text" id="name" name="form[name]" /></div>
		<div><label>Email:</label> <input type="text" id="email" name="form[email]" /></div>
        <div><label>File:</label> <input type="file" id="file" name="form[file]" /></div>
        <div><input type="submit" value="submit" /></div>
		<div id="info"></div>
    </form>
	</body>
</html>
itt következik a prototype class

var Uploader = 

	Class.create();
	Uploader.prototype = {
		
		initialize : function(options){
			this.form = options.form;
			Event.observe(this.form,'submit',this.onSubmit.bindAsEventListener(this));
			
			this.beforeStart = typeof(options.beforeStart)  == 'function' ? options.beforeStart : undefined;
			this.afterFinish = typeof(options.afterFinish) == 'function' ? options.afterFinish : undefined;					
		},
		
		onSubmit : function (e){
			this.beforeStart ? this.beforeStart() : null;
		
			var form = Event.element(e);
			this.uploadId = form.target = 'loader_' + Date.parse(new Date());
					
			var uploadContainer = Builder.node ('div',{},[Builder.node('iframe',{id:this.uploadId,name:this.uploadId,src:"about:blank",style:"display:none"})]);
			document.body.appendChild(uploadContainer);
			
			Event.observe(form.target,'load',function(){
				this.onComplete.bind(this)(this.uploadId);
			}.bind(this));
			
			return true;
					
		},
		
		onComplete : function(uploadId){
			var response = window.frames[uploadId].document.body.innerHTML;
			this.afterFinish && response ? this.afterFinish(response) : null;			
		}
	
}
elmélet lásd http://weblabor.hu/forumok/temak/16313/hozzaszolas#comment-37883 :) , jelenlegi php fájlt, a php.net támogatta

<?php
$uploaddir = '';
$uploadfile = $uploaddir . basename($_FILES['form']['name']['file']);

if (move_uploaded_file($_FILES['form']['tmp_name']['file'], $uploadfile)) {
   print_r ($_FILES);
} else {
   echo "Possible file upload attack!\n";
}
?>
http://toxin.hu/weblabor/upframe/index.htm
http://toxin.hu/weblabor/upframe/upframe_01.zip , kéretik kis fájlokkal demózni :) , és hozzászólni jó lenne egy crossbrowser verzió, IE6-on, és fx 2.0.0.1-en nézegettem, enyhén megfázva de lelkesen :)

üdv t
8

Nagy vagy.

rokkok · 2007. Jan. 3. (Sze), 15.09
Kedves toxin!

Csak most kerültem net közelben, és köszönöm a segítséget. Neki is látok a formhoz. Remélem sikerül. :) a zippet lekaptam, most jön az értelmezése. :) Fejleményekről írok. Remélem nem bénázok el semmit.

Búék!! rokkok
9

Nem sikerül...

rokkok · 2007. Jan. 6. (Szo), 11.15
Újra itt. Próbáltam az általad (toxin) említett példát a gyakorlatba átültetni, de sajna eredménytelenül. Nem pontosan ezt akartam. Továbbra is egy scriptet keresek (lehet ajax is) ami a feltöltő gombra való kattintás után egyszerűen a gombot eltünteti, és a helyére egy animált gifet tesz be. Apropó, másik gondd, hogy az animált gif amikor bejön sajnos nem megy. Csak az első kocka kimerevedve látszik. Szóval egy egyszerűnek tűnő dolog kezd egyre kuszább lenni. Némi harc megy a browserekkel. Mire sikerül egy scriptet beeröltetni, hogy működjön akkor meg a gif vacakol. Szóval továbbra is bújom a netet, hátha...
10

akkor konkrétabban, egy lehetséges megoldás

toxin · 2007. Jan. 6. (Szo), 12.44

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script src="js/prototype.js" type="text/javascript"></script>
		<script src="js/builder.js" type="text/javascript"></script>
		<script src="js/uploader.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			window.onload = function(){
				new Uploader({form:'file_uploader',beforeStart:beforeStart,afterFinish:afterFinish});
			}
			
			function beforeStart(){
				Position.clone('submit_upload','img_upload');
				$('submit_upload').hide();				
				$('img_upload').setStyle({display:'block'});
			} 
			
			function afterFinish(response){
				$('img_upload').hide();
				$('submit_upload').show();
				
			}
		</script>
		
		<style type="text/css">
			#submit_upload{
				width: 70px;  
				height: 20px;
				position: absolute;
			}
			
			#img_upload {
				display: none;
				position: absolute;
			}
			
		</style>
	</head>
	<body>
		<form id="file_uploader" action="index.php" method="post" enctype="multipart/form-data" >
        <div><label>File:</label> <input type="file" id="file" name="form[file]" /></div>
        <div>
			<input id="submit_upload" type="submit" value="submit" />
			<img id="img_upload" src="loading_animation_liferay.gif" width=70 height=10 />
		</div>
		<div id="info"></div>
    </form>
	</body>
</html>
demo
http://toxin.hu/weblabor/up_pic/pr_img.zip

üdv t
11

Egyszerre.

rokkok · 2007. Jan. 6. (Szo), 13.09
Szia!

Nagyjából egyszerre kotortuk elő a megoldást. :) Itt tartok, csak a gifet nem jeleníti meg. :( A kód:

<html>
<head>
<script language="javascript">
function doButton()
{
document.getElementById("valtas").innerHTML = "<br /><img src='http://oldalam.com/indikator.gif'></img>";
}
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" onsubmit="doButton()">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000000" />
<input type="file" name="feltoltes">
<div id="valtas"><br /><input type="submit" value="Feltöltés"></div>
</form>
</body>
</html>

Szóval a gomb eltűnik, csak az indikátort nem tudom becsalni. A Te verziódat mindjárt próbálom. És köszi a helpet. :)
12

Így se jó-úgy se jó. :(

rokkok · 2007. Jan. 6. (Szo), 14.28
Nah feltettem a Te verziódat. Sajna a style lekérés miatt nem jó mivel maga a gomb is css-ből kapja a paramétereket, így a poziciókkal baj van váltásnál. :( Az általam küldött megoldást kéne szerintem tovább gyúrni működőképesre. Még nem adom fel a lelkesedésem meg van. :) Úgy is legyőzöm a problémát csak idő kérdése. Amúgy amit küldtél az jó egy szűz oldalba, de nálam kismillió css van. Azért köszi, hogy időt szántál a problémára.
13

folyton folyvást folytatjuk :)

toxin · 2007. Jan. 6. (Szo), 14.54
akkor így ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<script src="js/prototype.js" type="text/javascript"></script>
		<script src="js/builder.js" type="text/javascript"></script>
		<script src="js/uploader.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			window.onload = function(){	
				submit_button = $('submit_button');
				new Uploader({form:'file_uploader',beforeStart:beforeStart,afterFinish:afterFinish});
				
			}
			
			function beforeStart(){
				// hiába löjjük ki amíg a submit_button váltózó él, elérhető marad, így afterFinish-ben visszatölthető
				// bővebben ppk on JavaScript c. könyv,  8.K. DOM hyperspace fejezete
				Element.remove(submit_button);
				Element.update('submit_wrapper','<img id="img_upload" src="loading_animation_liferay.gif" width=70 height=10  />');
			} 
			
			function afterFinish(response){
				Element.remove('img_upload');
				$('submit_wrapper').appendChild(submit_button);					
			}
		</script>

	</head>
	<body>
		<form id="file_uploader" action="index.php" method="post" enctype="multipart/form-data" >
	        <div><label>File:</label> <input type="file" id="file" name="form[file]" /></div>
	        <div id="submit_wrapper">
				<input id="submit_button" type="submit" value="submit" />				
			</div>			
    	</form>
	</body>
</html>
demo
http://toxin.hu/weblabor/up_2/pr.zip

üdv t

ui: a könyv honlapja http://www.quirksmode.org/book/index.html egyébként érdemes elolvasni, ajánlom mindenkinek aki js-el akar mélyebben folgalkozni
14

Újabb próba.

rokkok · 2007. Jan. 6. (Szo), 16.40
Megnézem hátha. :) Az én kódom teljesen halott ügy? Vagy esetleg lehet vele mit kezdeni. Csak zárójelben kérdezem.
15

Működik csak...

rokkok · 2007. Jan. 6. (Szo), 16.58
Nah feltettem, és szépen dorombol, csak amikor befejezi, akkor egy igazoló oldalra kéne mennie amit be is állítok neki a form action-ban, de nem hallgat rám. :( Esetleg valamelyik js-be is bele kéne túrnom? Mert feltölt, csak egy adott mappába kéne neki. keresem az okot.