Avatar billede htx98i17 Professor
08. februar 2009 - 08:52 Der er 13 kommentarer og
1 løsning

automatisk ny form felt

Jeg har et multi upload script.

Jeg vil gerne have at når man har browset efter en fil i input file, så skal der automatisk dukke endnu en input file frem og sådan skal man kunne blive ved.

nogen der ved hvordan man gør det?
Avatar billede majbom Novice
08. februar 2009 - 10:28 #1
Avatar billede htx98i17 Professor
08. februar 2009 - 10:32 #2
lige akkurat

jeg roder lige lidt med det og vender tilbage
Avatar billede htx98i17 Professor
08. februar 2009 - 10:39 #3
jeg har forsøgt at tilføje en class ved:
newField.setAttribute('class', 'inputbox');

kan man ikke det?

derudover har jeg ændret følgende:
newField.setAttribute('name', 'fil[]');

Er det fint nok?

Når et ny file field kommer frem, så rykker det lissom "ud af" designet. Den springer ud af den table den burde være i. Hvordan kan det være?
Avatar billede majbom Novice
08. februar 2009 - 11:12 #4
ret:

newField.setAttribute('class', 'inputbox');

til:

newField.setAttribute('className', 'inputbox');

fill[] burde virker fint nok, så kan du evt. fjerne den del med totalFields, som kun bruges til at navngive felterne.

jeg har bare lavet så den laver en <br> før hvert felt den indsætter. hvis du bruger tabeller, så kan du bruge det i stedet for <br>, selvom det andet burde virke fint nok...

har du noget kode eller et link til siden?
Avatar billede htx98i17 Professor
08. februar 2009 - 11:22 #5
super... class og fil[] fungerer.

jeg poster lige det snip som det handler om. Der kan du se hvordan de nye file fields bryder ud...

<html>
    <head>
       
        <LINK rel="stylesheet" href="stylesheet.css" >
       
        <script type="text/javascript">
            var totalFields = 0;
            function newFileField(field){
                totalFields++;
                var frm = document.getElementById('frmFileFields');
               
                var brk = document.createElement('br');
                frm.appendChild(brk);
               
                var newField = document.createElement('input');
                newField.setAttribute('className', 'inputbox');
                newField.setAttribute('type', 'file');
                newField.setAttribute('name', 'fil[]');
                addEvent(newField);
                frm.appendChild(newField);
            }
           
            function addEvent(elm){
                if(elm.addEventListener)
                    elm.addEventListener("change", function(){newFileField(this)}, true);
                else if(elm.attachEvent)
                    elm.attachEvent("onchange", function(){newFileField(this)});
                else
                    elm.onchange = function(){newFileField(this)};
            }
        </script>
    </head>

<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF" >

<form action="actions/opretvare.php" method="post" name="gruppeform" enctype="multipart/form-data" id="frmFileFields">
    <input type="hidden" value="" name="id" >
    <input type="hidden" value="1290" name="nrposition" >
    <input type="hidden" value="3" name="nr" >
    <table border="0" cellspacing="0" cellpadding="0" align="center" >
       
        <tr>
            <td class="main" width="80" align="left" >Billede:&nbsp;</td>
            <td class="main" width="300" align="left" ><input type="file" name="fil[]" tabindex=13 class="inputbox" onchange="newFileField(this)">&nbsp;</td>
           
        </tr>
                <tr>
            <td class="main" width="80" align="left" >&nbsp;</td>
            <td class="main" width="100" align="left" ><br><br><input type="submit" name="send" value="Opret vare" class="submit" name="sendnu" >&nbsp;</td>
           
        </tr>
    </table>
</form>
Avatar billede majbom Novice
08. februar 2009 - 11:40 #6
ja, selvfølgelig vil den lave det uden for sammenhængen, det er mig der er lidt sløv i dag. hvis du laver et id på den td, hvor du allerede har din filinput i, i stedet for på selve formen.

som det er nu, tilføjer den naturligvis felterne efter det sidste element i formen, som er den tabel :)
Avatar billede htx98i17 Professor
08. februar 2009 - 11:44 #7
hvis jeg sætter den her:
<td class="main" width="300" align="left" id="frmFileFields" >
                <input type="file" name="fil[]" tabindex=13 class="inputbox" onchange="newFileField(this)">
            </td>

så bryder den stadig ud. Gør den ikke det ved dig?
Avatar billede htx98i17 Professor
08. februar 2009 - 11:48 #8
nej nu det mig det er sløv
det funger!

tusind tak. lig et svar
Avatar billede majbom Novice
08. februar 2009 - 12:24 #9
kanin, selv tak
Avatar billede majbom Novice
08. februar 2009 - 15:12 #10
tak for point
Avatar billede olebole Juniormester
08. februar 2009 - 17:00 #11
<ole>

Denne kode:

                var newField = document.createElement('input');
                newField.setAttribute('className', 'inputbox');
                newField.setAttribute('type', 'file');
                newField.setAttribute('name', 'fil[]');
                addEvent(newField);
                frm.appendChild(newField);

- er jeg ret sikker på, ikke virker i IE. Ved første øjekast virker det sikkert meget godt, men feltet ender ikke op med navnet 'fil[]'. IE kan nemlig ikke sætte name-attributter med DOM  ;o)

I IE bør koden se sådan ud:

                var newField = document.createElement("input type='file' name='fil[]'>");
                newField.setAttribute('className', 'inputbox');
                addEvent(newField);
                frm.appendChild(newField);

- som til gengæld er hamrende invalid  :o|

Den bedste løsning er efter min mening at klone det allerede eksisterende element:
    <input id="inpTempl" type="file" name="fil[]" tabindex=13 class="inputbox" onchange="newFileField(this)">

                var newField = document.getElementById("inpTempl").cloneNode(true);
                newField.removeAttribute("id");
                frm.appendChild(newField);

/mvh
</bole>
Avatar billede olebole Juniormester
08. februar 2009 - 17:02 #12
- og dokumentationen fra MS:
    http://msdn.microsoft.com/en-us/library/ms536389(VS.85).aspx
Avatar billede htx98i17 Professor
08. februar 2009 - 17:20 #13
tak for input Ole
Avatar billede olebole Juniormester
08. februar 2009 - 18:02 #14
Anytime  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester