Dynamische Formularfelder (file)

[kerbstone]

Hallo,

ich versuche gerade ein Formular zu prgrammieren,
bei dem es möglich ist, bis zu 4 Fotos maximal
hochzuladen. Sind lediglich 2 Fotos gewünscht, so
sollen auch nur 2 File-Felder angezeigt werden.

Ich weiß nicht wo es hakt...
Wäre nett, wenn ihr mir weiterhelfen könntet :-)

<script type="text/javascript">
<!--
var chosen = false;

function fotoanzahl() {
    return document.getElementById("fotoanzahl");
}

function createFileFields(filefields, fotoanzahl) {
    if(chosen == false) {
    for(i=0;i<fotoanzahl;i++) {
        var fileUpload = document.getElementById(filefields);
        var obj        = document.createElement('input');
    
        obj.type = 'file';
        obj.name = 'file[]';
    
        fileUpload.appendChild(obj);
        fileUpload.appendChild(document.createElement('br'));
        
        chosen = true;
    }
    }
}
</script>
<form id="form" name="form">
<div id="filefields"></div>
<select id="fotoanzahl" name="fotoanzahl" onChange="fotoanzahl()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<a href="#" onClick="createFileFields('filefields',fotoanzahl())">erstellen</a>
</form> 

[Abraxax]

hier mal 1:1 code von einem meiner projekte. das sollte (fast) genau das machen, was du schon probiert hast. ,-)

<form action="/...." method="post" enctype="multipart/form-data">
<input type="hidden" name="path" value="/" />

<h2>Datei(en) hochladen</h2>

<div id="uploadArea">
		
	<p>
		<span class="small">Datei angeben:</span><br />
		<input type="file" name="uploads[]" />
	</p>

</div>

<p><a style="cursor:pointer;" onclick="addUploadField(); return false;">weitere Datei angeben</a></p>


<script type="text/javascript">
var uploadFieldCounter = 0;
function addUploadField()
{
	uploadFieldCounter++;
	
	span = document.createElement('span');
	span.setAttribute('class', 'small');
	span.appendChild(document.createTextNode('weitere Datei angeben:'));

	br = document.createElement('br');
	
	upload = document.createElement('input');
	upload.setAttribute('type', 'file');
	upload.setAttribute('name', 'uploads[]');

	removeLink = document.createElement('a');
	removeLink.setAttribute('style', 'cursor:pointer; margin-left: 5px;');
	removeLink.setAttribute('onclick', 'removeUploadField('+uploadFieldCounter+'); return false;');
	removeLink.appendChild(document.createTextNode('Upload-Feld löschen'));
	
	para = document.createElement('p');
	para.setAttribute('id', 'extraUploadArea' + uploadFieldCounter);
	para.appendChild(span);
	para.appendChild(br); 
	para.appendChild(upload);
	para.appendChild(removeLink);
	
	document.getElementById('uploadArea').appendChild(para);
}
function removeUploadField(id)
{
	if ( document.getElementById('extraUploadArea'+id) )
	{
		document.getElementById('uploadArea').removeChild
		(
			document.getElementById('extraUploadArea'+id)
		);
	}
}
</script>



<p><input type="submit" name="" value="upload" /></p>

</form>

[asp2php]

selectedIndex ist dein Freund.

[kerbstone]

Das ist ja genadenlos gut. Vielen Dank :-)

[Abraxax]

freut mich zu hören.

[kerbstone]

Ich probiere jetzt nur noch dies zu übertragen auf mein
Beispielcode. Schwierigkeiten habe ich lediglich bei dem
Erfassen, wieviele Fotofelder angezeigt werden sollen.

<a href="#" onClick="createFileFields('filefields',fotoanzahl())">erstellen</a>

Hättest Du hier evtl. einen Tipp?

[Abraxax]

wozu?

es reicht doch ein feld aus ... wenn ein weiteres benötigt wird klickt der user auf den link.

du bist ja bisher mit deinem dropdown soweit und willst eine bestimmte vorher zu definierende anzahl an feldern mit einmal schreiben.

meine philosophie ist anders. ich nehmen nur ein feld. bei bedarf lasse ich ein weiteres anhängen.

[Kropff]

function fotoanzahl()
{
  ele = document.getElementById("fotoanzahl");
  sel = ele.selectedIndex;
  num = ele.options[sel].value;
  return num;
} 

so in der art. und ungetestet.

peter

[kerbstone]

Perfekt, echt klasse

Die Idee mit dem Wurzelelement und dort immer wieder
Knoten anhängen zu können ist natürlich gut,
aber ich suchte mehr letzteres.
Hier bedanke ich mich für die schnelle Hilfe!!!

[kerbstone]

Schade, letzteres ist bei mir nur Google Chrome kompatibel. Im Opera funktioniert es leider nicht.

[asp2php]

Wo klemmt's denn? Fehlermeldung? Hast du 'ne Onlineseite?