[JavaScript] neues uploadfeld anzeigen lassen

[chrpun]

Hallo leute.

Ich habe für ein Portal einen Bilderupload geschrieben.
dort werden jetzt standart mäßig 10 upload felder untereinanderangezeigt:

<input name="picture[]" type="file" size="50" />

nun würde ich gerne darunter einen link oder ein schaltfläche setzen, die sagt: ein Feld hinzufügen.

die soll nun eine javascript funktion aufrufen (onClick oder per javascript: link) die mir dann ein neues uploadfeld zwischen den link und das letzte feld schreibt.. (so wie bei den G-Mail Mailanhangfeldern)

jemand eine idee wie ich das realisieren könnte? google ist da irgendwie nicht soo hilfreich.



ein

function add_file() {
    document.getElementById("fields").innerHTML =
        document.getElementById("fields").innerHTML + 
        "<input name=\"picture[]\" type=\"file\" /><br /><br />";
}

löscht die schon ausgewählten bilder wieder...



Dankeschön

[wahsaga]

Re: [JavaScript] neues uploadfeld anzeigen lassen

Mach's ordentlich über die DOM-Methoden createElement und appendChild bzw. insertBefore.

[chrpun]

also mein HTML ist jetzt:

<div id="fields">
	<input name="picture[]" type="file" size="50" />
	<br /><br />
	<input name="picture[]" type="file" size="50" />
	<br /><br />
	<a id="addnew" href="javascript:add_file()">add more...</a><br />
	</div>

und mein javascript:

function add_file() {
	var neuFeld = document.createElement("div");
	var Text = document.createTextNode("<input name=\"picture[]\" type=\"file\" size=\"50\" /><br /><br />");
	neuFeld = document.appendChild(Text);
	document.getElementById("fields").insertBefore(neuFeld, document.getElementById("addnew"));
}

wenn ich nun auf den link klicke passiert nichts. hat jemand einen kleinen tipp für mich?

[Wurzel]

- im FF getestet?
--> was sagt die JS-console?
- sonstige fehlermeldungen?
- online-beispiel?

[chrpun]

der FF sagt:
Fehler: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "http://fotos.chrpun.de/script.js Line: 9"]

im IE wird das input als text eingefügt. (also ich seh den quellcode auf der seite.
(hmm... wird wohl daran liegen dass ich creatTEXTNode mache...)

jemand ne idee?

(p.s. online beispiel :http://fotos.chrpun.de/test.html )

[wahsaga]

Original geschrieben von chrpun
im IE wird das input als text eingefügt. (also ich seh den quellcode auf der seite.
(hmm... wird wohl daran liegen dass ich creatTEXTNode mache...)

Gut erkannt.

jemand ne idee?

Keinen TextNode erzeugen, sonden ein weiteres Element - hat mit Div doch auch geklappt ...

[chrpun]

ok... aber wie schreib ich die parameter für das input element hin?

einfach nur document.createelement("input") reicht nicht und document.createelement("input type=\"\file" etc.") geht nicht.

sorry, aber ich bin nicht so bewandert mit javascript. eher PHP ;-)

aber schonmal danke wahsaga

[ghostgambler]

$input = document.createelement("input");
$input.setAttribute("type", "file);
?

[chrpun]

danke schön an alle!

meine lösung ist nun (getestet in FF und IE7):

function add_file() {
	var neuFeld = document.createElement("input");
	neuFeld.setAttribute("name","picture[]");
	neuFeld.setAttribute("type","file");
	neuFeld.setAttribute("size","50");
	document.getElementById("fields").insertBefore(neuFeld, document.getElementById("addnew"));
}