Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    fci
    fci is offline
    Senior Coder
    Join Date
    Aug 2004
    Location
    Twin Cities
    Posts
    1,345
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Add/remove multiple input type="file" without losing value

    example with <ol> as parent.
    Code:
    <script type="text/javascript"><!--
    var gFiles = 0;
    function addFile() {
        var li = document.createElement('li');
        li.setAttribute('id', 'file-' + gFiles);
        li.innerHTML = '<input type="file" name="file[]"><span onclick="removeFile(\'file-' + gFiles + '\')" style="cursor:pointer;">Remove</span>';
        document.getElementById('files-root').appendChild(li);
        gFiles++;
    }
    function removeFile(aId) {
        var obj = document.getElementById(aId);
        obj.parentNode.removeChild(obj);
    }
    --></script>
    <span onclick="addFile()" style="cursor:pointer;">Add</span> 
    <ol id="files-root">
    <li><input type="file" name="file[]">
    </ol>
    example using table:
    Code:
    <script type="text/javascript"><!--
    var gFiles = 0;
    function addFile() {
        var tr = document.createElement('tr');
        tr.setAttribute('id', 'file-' + gFiles);
        var td = document.createElement('td');
        td.innerHTML = '<input type="file" name="file[]"><span onclick="removeFile(\'file-' + gFiles + '\')" style="cursor:pointer;">Remove</span>';
        tr.appendChild(td);
        document.getElementById('files-root').appendChild(tr);
        gFiles++;
    }
    function removeFile(aId) {
        var obj = document.getElementById(aId);
        obj.parentNode.removeChild(obj);
    }
    
    --></script>
    <span onclick="addFile()" style="cursor:pointer;">Add</span> 
    <table><tbody id="files-root">
    <tr><td><input type="file" name="file[]"></td></tr>
    </table>
    friend needed this. I did the ol one first then he said he wanted it as a table for some reason.. so here they are.. nothing fancy.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    It;s OK...and here's the full DOM compliant variant (innerHTML is not a DOM method...) for those which wanna exercise DOM methods:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    function 
    addFile(){
    var 
    root=document.getElementById('mytab').getElementsByTagName('tr')[0].parentNode;
    var oR = 
    cE('tr');var oC cE('td');var oI cE('input'); var oS=cE('span')
    cA(oI,'type','file');cA(oI,'name','file[]');
    oS.style.cursor='pointer';
    oS.onclick=function(){
    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
    }
    oS.appendChild(document.createTextNode(' Remove'));
    oC.appendChild(oI);oC.appendChild(oS);oR.appendChild(oC);root.appendChild(oR);
    }
    function 
    cE(el){
    this.obj =document.createElement(el);
    return 
    this.obj
    }
    function 
    cA(obj,att,val){
    obj.setAttribute(att,val);
    return
    }
    </script>
    </head>
    <body>
    <span onclick="addFile()" style="cursor:pointer;">Add</span> 
    <table id="mytab">
    <tr><td><input type="file" name="file[]"></td></tr>
    </table>
    </body>
    </html> 
    Last edited by Kor; 08-15-2005 at 01:34 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Dear Sir,
    I would really thank to you for this script. It was really a saver .
    Thanks and best regards.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •