Dynamische Formularfelder (file)

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Dynamische Formularfelder (file)

    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 :-)

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

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

    function 
    createFileFields(filefieldsfotoanzahl) {
        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

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

    Code:
    <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>
    INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


    Kommentar


    • #3
      selectedIndex ist dein Freund.

      Kommentar


      • #4
        Das ist ja genadenlos gut. Vielen Dank :-)

        Kommentar


        • #5
          freut mich zu hören.
          INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


          Kommentar


          • #6
            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?

            Kommentar


            • #7
              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.
              INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


              Kommentar


              • #8
                PHP-Code:
                function fotoanzahl()
                {
                  
                ele document.getElementById("fotoanzahl");
                  
                sel ele.selectedIndex;
                  
                num ele.options[sel].value;
                  return 
                num;

                so in der art. und ungetestet.

                peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  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!!!

                  Kommentar


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

                    Kommentar


                    • #11
                      Wo klemmt's denn? Fehlermeldung? Hast du 'ne Onlineseite?

                      Kommentar

                      Lädt...
                      X