Dynamisch neue Datei-Felder hinzufügen

[Html]

Wie oben erwähnt habe ich ein Formular zum hochladen von Dateien. Zunächst wird ein Datei-Feld angezeigt, durch einen Button lassen sich zusätzliche Felder hinzufügen.

Von der Funktion funktioniert das ganze!!

Nur möchte ich das ganze etwas "designen". Dazu habe ich mit vorgestellt das ganze in eine Tabelle zu packen und das erste Datei-Feld in die erste Zeile. Nun soll in dieser Tabelle dynamisch eine neue Zeile mit neuem Datei-Feld hinzugefügt werden können.

Das ist mein bisheriger Code:

<script language="JavaScript" type="text/javascript">
  function clone_this(button, objid){
    // Tabelle innerhalb des DIVs mit ID "new_passage" clonen
    // Achtung: Es dürfen keine Zeichen zwischen dem DIV- und dem TABLE-Tag stehen!
    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);

    // Im Parent-DIV vor dem Kindknoten "button" einhängen
    button.parentNode.insertBefore(clone_me, button);
}
</script>




<?php
echo "<form name='form' method='post' action=".$_SERVER['PHP_SELF']."?section=uploadpicture enctype='multipart/form-data'>
<table><tr><td><input type='file' name='imagefile[]' size='60'></td></tr></table>";

?>

<div>
<input value="Feld hinzfügen" onclick="javascript:clone_this(this, 'new_passage');" type="button">
</div>



<div style="visibility:hidden; display:none">
<div id="new_passage"><table name="cloneTable">
<tr>
  <td><input type="file" name="imagefile[]" size="60"></td>
</tr>
</table></div>
</div>




<?	
echo "<input type='hidden' name='seite' value='" . $_GET['id'] . "'>";
echo "<br><br><input type='submit' name='Upload' value='ausgewählte Bilder hochladen'>";
echo "</form>";
?>

Wäre euch sehr dankbar wenn mir jemand sagen könnte wie ich den Code abändern muss!

 

[kuddeldaddeldu]

Hi,

Klone den ersten Kindknoten der Tabelle und häng ihn mit appendChild hinten an:

<script language="JavaScript" type="text/javascript">
  function clone_this(objid){
    // Tabelle innerhalb des DIVs mit ID "new_passage" clonen
    // Achtung: Es dürfen keine Zeichen zwischen dem DIV- und dem TABLE-Tag stehen!
    var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
    // Im Parent-DIV vor dem Kindknoten "button" einhängen
    document.getElementById(objid).appendChild(clone_me);
}
</script>

<?php
echo "<form name='form' method='post' action=".$_SERVER['PHP_SELF']."?section=uploadpicture enctype='multipart/form-data'>
<table id=\"uploads\"><tr><td><input type='file' name='imagefile[]' size='60'></td></tr></table>";

?>

<div>
<input value="Feld hinzfügen" onclick="javascript:clone_this('uploads');" type="button">
</div>

<?    
echo "<input type='hidden' name='seite' value='" . $_GET['id'] . "'>";
echo "<br><br><input type='submit' name='Upload' value='ausgewählte Bilder hochladen'>";
echo "</form>";
?>

LG

 

[Html]

Super danke, das sieht schon mal gut aus.

Ist es denn noch möglich das der Button "Feld hinzufügen" immer rechts neben dem letzten Dateifeld(also nach dem Durchsuchen-Button) in der Zeile steht.

Und das der "Senden" Button auch in einer Zeile der Tabelle steht?


Wäre echt super wenn das noch klappen würde!

 

[kuddeldaddeldu]

Hi,

welchen Sinn soll das haben? Positionier das doch über CSS. Frag' mich sowieso, warum man Upload-Felder in eine Tabelle packen will...

LG