hannson fyrir 19 árum, 2 mánuðum Fjöldi lestra: 356

Vandamál með variable held ég

Hæ, ég er með örlitið vandamál með smá javascript kóða.

Ég er að búa til php upload script og sem tekur mörg file í einu, og nenni ekki að hafa takmark á client side, þaes vill geta haft bara 5 og svo getur notandinn bætt inputum eftir þörf, eða 5 inputum í einu með því að ýta á link

Hér er einfaldi kóðinn minn en það kemur bara ein lína með “NaN” eða eitthvað í staðin fyrir tölu

<html>
<head>
<script type="text/javascript">
var fjoldi = 5
function add5() 
{
 for(numer = 0; numer <= 5; numer++)
 {
	var skra = fjoldi+numer 
	document.write("<label for=\"skra"+skra+"\">Skrá "+skra+"</label>")
	document.write("<input name=\"userfile[]\" id=\"skra" +skra+ "\" type=\"file\" /><br />")
 }
 
var fjoldi = fjoldi+5; 
}
</script>
</head>
<body>
<input type="button" 
onclick="add5()" 
value="Call function">
</body>
</html>

ask fyrir 19 árum, 1 mánuði

Þetta ætti að virka núna.

<html>
<head>
<script type="text/javascript">
var fjoldi = 1;
function add5()
{
	var output = "";
	for(var numer=1; numer<=5+fjoldi; numer++)
	{
  	 var skra = numer;
  	 var output = output + "<label for=\"skra"+skra+"\">Skrá "+skra+"</label> \n <input name=\"userfile[]\" id=\"skra" +skra+ "\" type=\"file\" /><br />"
	}
	upload.innerHTML = output;	
	fjoldi += 5;
}
</script>
</head>
<body>
<div id="upload"></div>
<input type="button" onclick="add5()" value="Call function">
</body>
</html>

Fyrra álit

ask fyrir 19 árum, 1 mánuði

Já eitt sem ég gleymdi að minnast á er að ég nennti ekki að replace breytuna skra, en allar breytur sem heita skra er raunverlega breytan numer.

Fyrra álit

hannson fyrir 19 árum, 1 mánuði

takk fyrir svarið, en ég reddaði þessu reyndar á annan hátt. Betri hátt!

Fyrra álit

ask fyrir 19 árum, 1 mánuði

Svona svo maður læri, má ég sjá þau lausn?

Fyrra álit

hannson fyrir 19 árum, 1 mánuði

já endilega hún er mjög skemmtileg, en þó ekki alveg tilbúin, en hugmyndin virkar samt.

Þetta er semsagt form til að uploada mörgum myndum í einu, setur það upp í lista (dropdown box) og er með svona preview glugga, en út af XSS öryggisfídusum þarf að accepta þegar maður fer á síðuna í IE (vegna þess að preview glugginn er í raun mynd á öðru domain, local disk þaes)

Núna þarf ég ekki að vera með milljón input box, nota það sama oft.

Hvernig virkar þetta? ef þú nennir ekki að lesa kóðann…

í html skjalinu er <input type=file id=file1>
þegar þú ýtir á browse takkann og velur file á harðadisknum þínum þá felur scriptið file1 (css display: none) og býr til nýtt form og setur á sama stað!

Svo er filename'ið sett sem option í dropdown boxið og svo virkar previewið þannig að það er <img id=preview> og þegar þú ýtir á eitthvað í dropdownboxinu þá breytist src í preview í sama value og það sem þú valdir í dropdownboxinu…

HTML skjalið

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<title>Uploader</title>
<style>
select#filelist {
width: 300px;
}
div {
border: 1px solid black;
}
div#uploadleft {
position: absolute;
top: 100px;
left: 10;
width: 350px;
height: 80%;
}
div#uploadright {
position: absolute;
top: 100px;
left: 360px;
width: 150px;
height: 80%;
}
button {
width: 120px;
}
</style>
<script src="f/multifile.js">
</script>
</head>
<body>
<h1>Myndir</h1>
<div id="uploadleft">
<p>Ýttu á <i>Browse</i> takkann hér fyrir neðan til að velja mynd til að senda</p><br/>
<form enctype="multipart/form-data" action="" method = "post">
<select id="filelist" name="userfile[]" size="6" onChange="multi_selector.newSelection()">
</select>
<input id="browser1" type="file" name="file_1" />
<br />
<br />
<input type="button" onclick="multi_selector.removeOption()" value="Fjarlægja"></input>
<br />
<b>Sýnir þá skrá sem er valin:</b>
<img id="preview" style="width: 120px;height:120px;border:2px solid black;" />
</div>
<input type="submit" name="submit" value="Senda allt" /><br />
</div>
<script>
	<!-- Create an instance of the multiSelector class, pass it the output target and the max number of files -->
	var multi_selector = new MultiSelector( document.getElementById( 'filelist' ), 3 );
	<!-- Pass in the file element -->
	multi_selector.addElement( document.getElementById( 'browser1' ) );
</script>
</form>
</body>
</html>

JS. class

Classann fann ég á einhverri síðu sem ég man ekki hvað heitir, þetta er í rauninni ekki nálægt því að vera hann lengur því hann gerir allt annað.

það er hægt að stilla hversu mörgum file'um má uploada í einu með því að setja max variable'inn þegar maður “býr” til klassann.

function MultiSelector( list_target, max ){
	// Where to write the list
	this.list_target = list_target;
	// How many elements?
	this.count = 0;
	// How many elements?
	this.id = 0;
	// Is there a maximum?
	if( max ){
		this.max = max;
	} else {
		this.max = -1;
	};
	/**
	 * Add a new file input element
	 */
	this.addElement = function( element ){
		// Make sure it's a file input element
		if( element.tagName == 'INPUT' && element.type == 'file' ){
			
			// Element name -- what number am I?
			element.name = 'file_' + this.id++;
			
			element.id = 'file_' + this.id;
	
			// Add reference to this object
			element.multi_selector = this;
			// What to do when a file is selected
			element.onchange = function(){
				// New file input
				var new_element = document.createElement( 'input' );
				new_element.type = 'file';
				// Add new element
				this.parentNode.insertBefore( new_element, this );
				// Apply 'update' to element
				this.multi_selector.addElement( new_element );
				// Hide this
				this.style.display = 'none';
				// Update list
				this.multi_selector.addOption( this );
			};
			// If we've reached maximum number, disable input element
			if( this.max != -1 && this.count >= this.max ){
				element.disabled = true;
			};
			// File element counter
			this.count++;
			// Most recent element
			this.current_element = element;
		} else {
			// This can only be applied to file input elements!
			alert( 'Error: not a file input element' );
		};
	};
	this.newSelection = function(){
	var x = document.getElementById("filelist");
	var img = document.getElementById("preview");
	var img_src = x.options[x.selectedIndex].text;
	
   img.src= 'file://' + img_src;
	
	}
	
	this.removeOption = function()
	{
		var x = document.getElementById("filelist");
		var id = 'file_'+x.value;
		alert(id);
		document.getElementsByName( id ).parentNode.removeChild( document.getElementsByName( id ) );
	
//alert(x.value);
		
		x.remove(x.selectedIndex);
	
		this.count--;
		// Og enable svo input boxið ef það er disable'að
		
	}
	this.addOption = function( element )
	{
document.forms[0].filelist.options[document.forms[0].filelist.options.length] = new
Option( element.value, this.id - 2 );
	}
};

Prófaðu þetta og komdu með comment og þannig…
btw þá var javascript classinn án license sem þíðir að hver sem er megi nota hann án takmarkanna og af sjálfsögðu á það sama við um það sem ég var búinn að gera…

Fyrra álit

hannson fyrir 19 árum, 1 mánuði

Ertu að tala um að eyða t.d. divi sem er með id?

Eitthvað eins og
<div class=“area”>
stórt svæði með myndum og dóterí
</div>

Þarftu að eyða því, er ekki nóg að fela það? Þá er nóg að gera:
document.area.style.display = 'none';
Er ég að misskilja?

Bara svona fyrst við erum að þessu og ég man núna.

í js classinum þá þarftu að fara í this.removeOption og commenta út:

alert(id);
document.getElementsByName( id ).parentNode.removeChild( document.getElementsByName( id ) );

Til að það virki að fjarlægja, en sko… gleymdi að segja, og þetta verður svar við spurningunni fyrir ofan:

Til þess að taka út file af listanum þarf helst að eyða forminu (sem er þá falið)

Og ég er ekki búinn að fatta hvernig ég eyði forminu og afþví það er ekki til skipun sem gerir það þá forrita ég bara skipun sem eyðir elementi eftir ID:

function removeElementById (id)  { 
	document.getElementsByName( id ).parentNode.removeChild( document.getElementsByName( id ) );
}

Þetta ætti að virka, fræðilega, en línan virkar einfaldlega ekki hjá mér í scriptinu :-(

Fyrra álit

Vefsíðugerð

Vefsíðugerð

Ofurhugar

Stjórnendur

Hverjir eru inni

Korkar - Byrjendur

Vandamál með variable held ég

Dýr

Dægurmál

Fræði

Leikir

Lífið

Lífsstíll

Margmiðlun

Menning

Skjár

Sport

Tónlist

Tækni

Vélar

Hugi