[JavaScript] Dynamisches Dateifeld

[Peet]

Hallo,

ich möchte mittels Javascript eigentlich eine recht einfache sache machen:

Es soll ein Dateifeld angezeigt werden, wenn man etwas hineinlädt soll darunter ein weiteres Dateifeld angezeigt werden.
Das hab ich auch soweit hinbekommen, aber nun haperts daran,
dass ich die Dateien mit PHP als Array auswerten will.

So sieht das bisher aus:

<script language="JavaScript">
function addFileInput() {
     var d = document.createElement("div");
     var file = document.createElement("input");
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment[]");
    file.onchange = function () {addFileInput()};
     d.appendChild(file);
     document.getElementById("moreUploads").appendChild(d);
}
</script>

<li><input type="file" name="attachment[]" id="attachment" onchange="javascript:addFileInput();" /></li>
<div id="moreUploads"></div> 

Nun weiß ich nicht, wie ich da jetz eine Liste auch für die von JS erzeugten Dateifelder übernehmen kann.
Und das zweite ist, ich will das ganze als Array übergeben, aber das will auch nicht so richtig klappen, es wird mir jedesmal angezeigt, dass as array nicht existiert.

Kann mir jemand einen Hinweise geben?

[TobiaZ]

aber nun haperts daran, dass ich die Dateien mit PHP als Array auswerten will.

Warum postest du dann nicht im PHP-Forum???

Nun weiß ich nicht, wie ich da jetz eine Liste auch für die von JS erzeugten Dateifelder übernehmen kann.

Wo? Warum?

Und das zweite ist, ich will das ganze als Array übergeben, aber das will auch nicht so richtig klappen, es wird mir jedesmal angezeigt, dass as array nicht existiert.

Wer zeigt das an? PHP oder JS? Wie ist der Wortlaut? Welcher Code wird verantwortlich gemacht?

Fragen über fragen, die du dir zuerst mal selbst stellen und beantworten solltest. Wenn das alles nicht hilft, dann formulierst du die Antworten bitte hier im Forum nochmal zu einer vernünftigen Problembeschreibung.

See you later!

[wahsaga]

Re: [JavaScript] Dynamisches Dateifeld

Original geschrieben von Peet
Das hab ich auch soweit hinbekommen, aber nun haperts daran, dass vor dem dateifeld noch ein listen-element angezeigt werden soll.

Und wie und wo hapert das?

var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "attachment[]"); 

Das geht im IE oftmals schief.
Per createElement erzeugte inputs sind zunächst immer vom type=text - das ändern des types ist oft problematisch, und das dynamische Setzen des name-Attributes auch.
Der IE erzeugt zwar die entsprechenden HTML-Elemente - aber kann sie anschliessend weder über den Namen ansprechen, noch übermittelt er die Werte darunter.

Die MSDN beschreibt zu createElement eine alternative Syntax, der man den kompletten HTML-Code für das Element übergibt. Ja, da muss man für cross-browser-Kompabilität meiner Erfahrung nach leider zweigleisig fahren. (Auch wenn die MSDN explizit behauptet, es ginge auch so wie oben steht - da lügt sie m.E.)

Nun weiß ich nicht, wie ich da jetz eine Liste auch für die von JS erzeugten Dateifelder übernehmen kann.

Definiere "übernehmen".

[Peet]

das mit der liste hat sich erledigt!!

php zeigt den fehler an, also besser gesagt php zeigt garnichts an wenn ich das $_FILES ausgeben lassen will.

hab das hier gepostet weil es ja an JS liegt wie es den Elementnamen als Array setzt, bei php schreibt man ja nur
input type=file name=dateien[]>
aber JS will das nicht so ganz

[Peet]

okay mal eine andere frage, weil ich gerade auf das nächste problem gestoßen bin:

ist es möglich einen kompletten div container zu klonen?

also wenn ich jetzt sowas hier habe:

<div id="dateifeld">
<li>{$form_fileselect} <input type="file" name="upload[]" id="upload" onchange="javascript:addFileInput();" /></li>
</div>
<div id="neuesdateifeld"></div> 

kann man nun den oberen div in den unteren kopieren?

{$form_select} ist eine smarty variable.

[TobiaZ]

Vorab solltest du dir mal klar machen, dass die Smarty-Variable gar nicht mehr existiert, wenn dein JS ausgeführt wird.

Und brich den Code um.

[Peet]

Vorab solltest du dir mal klar machen, dass die Smarty-Variable gar nicht mehr existiert, wenn dein JS ausgeführt wird.

das ist ja elendich

aber smarty ersetzt doch zuerst alle variablen, dann wird ja theoretisch die variable mit dem text ersetzt und js erhält dann den wert, also

<script>
var smartytext = {$form_selectfile};
</script> 

[TobiaZ]

Ja.

Smarty => PHP => serverseitige Sprache

Das ganze Smarty-Gedöns wird weit vor deinem Javascript ausgeführt. Ist doch logisch, dass die Smarty-Variable dann nirgendwo mehr im Quelltext steht. Schau mal in den HTML-Quelltext rein, wenn dann deine Smarty-Variable noch drin steht, hast du definitiv was falsch gemacht (serverseitig).

[highrise]

ist es möglich einen kompletten div container zu klonen?

da nimmst du die Antwort fast schon vorweg...

cloneNode() ist, was du suchst:
http://de.selfhtml.org/javascript/ob...htm#clone_node

greetz, high

[Peet]

hey danke, ich schau mal ob ich damit was anfangen kann!

[Peet]

wow ich bin stolz, ich hab ewig dran rumgefriemelt, aber habs jezt geschafft

hier die lösung:

<script language="javascript">
function addFileInput() {
  inputclone = document.getElementById("original").cloneNode(true);
  document.getElementById("cloned").innerHTML += inputclone.innerHTML;
}
</script>

<form method="POST" action="" enctype="multipart/form-data">
<div id="original">
<li>{$form_fileselect} 
<input class="input" type="file" name="upload[]" id="upload" onclick="javascript:addFileInput();" />
</li>
</div>
<div id="cloned"></div> 

Die Smarty Variable hab ich übrigends mit {literal} für smarty sichtbar gemacht, somit funktioniert jetzt alles

vielen danke für eure Hilfe!

[wahsaga]

Und wofür bitte klonst du einen Node - wenn du dann diesen Node überhaupt nicht ins Dokument einfügst, sondern nur seine innerHTML-Eigenschaft benutzt, um an den HTML-Code ranzukommen.

[Peet]

hi,
meinst du so?

inputclone = document.getElementById("original");
document.getElementById("cloned").innerHTML += inputclone.innerHTML; 

und eine Sache noch, ich kann nur das erste dateifeld mit einer datei füllen, die kopierten darunter bleiben alle leer

[wahsaga]

Original geschrieben von Peet
meinst du so?

In etwa.
Wie gesagt, Klonen nur zum Wegwerfen ist unsinnig.

und eine Sache noch, ich kann nur das erste dateifeld mit einer datei füllen, die kopierten darunter bleiben alle leer

Tja, das ist reichlich wenig an brauchbarer Info.

Dass die IDs anschliessend mehrfach im Dokument vorkommen, wäre schon mal ein Problem, zu dem man sich was überlegen sollte.

Alles weitere erfordert wohl ein sinnvolle Debug-Strategie.

[Peet]

Dass die IDs anschliessend mehrfach im Dokument vorkommen, wäre schon mal ein Problem, zu dem man sich was überlegen sollte.

aber das betrifft ja nur die DIV-IDs, das sollte ja das input feld nich stören...oder doch?

kann es daran liegen, dass ich dem dateifeld den namen upload[] (also ein Array) gegeben habe, und javascript jetzt nicht unterscheiden kann?