tutorials.de Buch-Aktion 02/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
370
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    kN0k_kN0k kN0k_kN0k ist offline Mitglied
    Registriert seit
    Mar 2005
    Beiträge
    19
    Hallo,
    Ich stehe vor folgendem Problem,
    ich möchte das mein Uplaodscript
    dynamisch mit Uploadfeldern erweitert wird
    und zwar abhängig von der Zahl die ich in einem Input-Feld
    eingebe...

    Hier erstmal mein Formular:

    PHP-Code:
    <form enctype="multipart/form-data\" action=\"".$_SERVER['PHP_SELF']."?section=admin&subm=gallery\" method=\"POST\">
                            <input type=\"hidden\" name=\"formsend\" value=\"gallery\" />
                            <input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"500000\" />
                            <p><input type=\"text\" name=\"anz\" size=\"4\" maxlength=\"2\" /> <input value=\"Hinzuf&uuml;gen\" type=\"button\" /></p>
                            <div>
                                <p><input type=\"file\" name=\"file[]\" /></p>    
                            </div>
                            <p><input type=\"submit\" value=\"hochladen\" /></p>
                        </form> 
    Das in dem div-Block soll geklont werden.
    Ich war natürlich nicht untätig und hab schon
    einige vorhandene Lösungsvorschläge ausprobiert
    und versucht anzupassen, aber wegen meiner doch
    geringen Javascript Kenntnisse bin ich daran gescheitert :/ .
    Ich möchte hier auch nicht unbedingt eine komplett fertige Lösung,
    es würde mir schon ein Ansatz oder ein paar Tips was ich beachten
    muss um wenigstens eine Kopie erstellen zu können, reichen.

    LG
     

  2. #2
    C-H C-H ist offline Mitglied Brokat
    Registriert seit
    Jan 2005
    Beiträge
    256
    Hallo!

    Das einfachste wäre eine feste Anzahl fest im Code zu schreiben und auszublenden (mit display: none) und wenn ein weiteres benätigt wird, das dann einfach einblenden.

    Die 2. Lösung wäre mit document.createElement() ein neues Element zu erzeugen. Hab' jetzt leider grad keinen Beispielcode bereit, aber vielleicht hilft dir das schonmal!
     

  3. #3
    FipsTheThief FipsTheThief ist offline Mitglied Platin
    Registriert seit
    Oct 2004
    Ort
    Leipzig
    Beiträge
    589
    Eine andere möglichkeit wäre noch der Onchange Eventhandler hier mal der Codeschnippsel dazu.

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    
    <html>
    <head>
    <script type="text/javascript">
       window.onload = function () {
             document.getElementById('uploadNumber').onchange = function () {
             var currentUploadFields = 0;
                            
             with(document.getElementById('fileFields')) {
                    
                 for(var i = 0 ; i < childNodes.length;i++) {
                     if(childNodes[i].nodeName == 'INPUT') {
                         currentUploadFields++;
                     }
                 }
                    
                 var newUploadFields = document.getElementById(this.id).value;
                    
                    
              if( newUploadFields > currentUploadFields) {
                  for(var i = 0 ; i < newUploadFields-currentUploadFields;i++) {
                      var newField = document.createElement('input');
                           newField.type = 'file';
                        
                           appendChild(newField);
                            
                     }
               } else if (newUploadFields < currentUploadFields) {
                  for(var i = currentUploadFields ; i > newUploadFields ; i--) {
                          removeChild(childNodes[i]);
                  }                 
              }
          }
       }
    }
    </script>
    </head>
    <body>
    <form method="post" action"#">
        <input type="text" id="uploadNumber"></input>
        <div id="fileFields">
            <input type="file"></input>
        </div>
    </form>
    </body>
    </html>

    Vorgehensweise hier , sobald sich der Wert des feldes mit der ID uploadNumber ändert nun werden alle aktuellen input file Felder eingesammelt erstmal. Das heisst wir gehen zu den DIV Layer fileFields und sammeln alle Kinder ein die als tag namen input haben und speichern diese in der variablen currentUploadFields ab.

    Den wert der eben eingegeben wurde , wird in der Variablen newUploadFields gespeichert.

    Sollte die Anzahl der neuen UploadFelder > als die Anzahl der aktuellen Input felder werden solange Felder hinzugefügt wie die Differenz zwischen beiden ist.
    Sollte die Anzahl der alten upload Felder grösser sein als die neue Anzahl , dann nehmen wir die Anzahl der aktuellen Felder als Start wert und löschen diese Knoten wieder raus einfach, so lange deren Anzahl nicht der Anzahl der neuen Felder entspricht.

    Das Prinzip sollte das gleiche bleiben egal ob man einen onclick auf einen Button setzt oder den Onchange nimmt.

    CSS Formatierung müsstest du dann selber vor nehmen.
    Geändert von FipsTheThief (26.01.07 um 22:47 Uhr)
     

  4. #4
    kN0k_kN0k kN0k_kN0k ist offline Mitglied
    Registriert seit
    Mar 2005
    Beiträge
    19
    super besten dank, funktioniert einwandfrei,
    auch die formatierung ist mir geglückt

    LG
     

Ähnliche Themen

  1. Kopieren eines Formulars
    Von perle93 im Forum PHP
    Antworten: 99
    Letzter Beitrag: 07.08.10, 19:22
  2. Abbruch eines Formulars
    Von crsakawolf im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 20.01.10, 13:04
  3. [Vb.net] Speichern eines Formulars
    Von Alaitoc im Forum .NET Windows Forms
    Antworten: 8
    Letzter Beitrag: 27.11.07, 12:53
  4. iframe-Inhalt als Teil eines Formulars übermitteln
    Von IIIRaVeNIII im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 03.04.05, 18:32
  5. Fehlermeldung beim Klonen eines JPanels
    Von tobiaft im Forum Java
    Antworten: 1
    Letzter Beitrag: 07.03.05, 15:56