javascript - how to replicate input file fields -


i've table named 'pedidos' , table named 'locais'. each 'pedidos' there can several 'locais'. i'm using form

form

in right column want user type data each 'locais' includes image file. when user clicks on 'acrescentar local' table on left being filled. instead off adding image loses file.

i'm using code:

    <link rel="stylesheet" type="text/css" media="screen" href= "redmond/jquery-ui-1.10.3.custom.css" />     <link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css" />      <script type="text/javascript" src="jquery-1.9.0.min.js"></script>     <script src="grid.locale-en.js" type="text/javascript"></script>     <script src="jquery.jqgrid.src.js" type="text/javascript"></script>     <title>untitled document</title>     </head>      <body>     <script language="javascript">     var a=0;     var clone = [];     function addloc()     {     /*  var tmp = jquery('#foto').clone();         clone.push(tmp[0]);*/            /*document.getelementbyid('loc_table').innerhtml+="<tr><td>"+document.getelementbyid('local').value+"</td><td>"+document.getelementbyid('comp').value+"</td><td>"+document.getelementbyid('larg').value+"</td><td>"+clone[a]+"</td></tr>";*/           document.getelementbyid('loc_table').innerhtml+="<tr><td>"+document.getelementbyid('local').value+"</td><td>"+document.getelementbyid('comp').value+"</td><td>"+document.getelementbyid('larg').value+"</td><td><input type='file' id='foto"+a+"'/></td></tr>";         document.getelementbyid('foto'+a)=document.getelementbyid('foto');           a++;     /*     "+document.getelementbyid('foto').value+"</td></tr>";     */      }     </script>     <table>     <tr>     <td>     <form id='addped' name='addped' action='#' method='post'>     <table>     <tr>     <td><label for="nome">nome</label></td>     <td><input type="text" id="nome" /></td></tr><tr>     <td><label for="desc">descricao</label></td>     <td><input type="text" id="desc" /></td></tr><tr>     <td><label for="datai">data de insercao</label></td>     <td><input type="text" id="datai" /></td></tr><tr>     <td><label for="datae">data de entrega</label></td>     <td><input type="text" id="date" /></td></tr><tr>     <td></td>     <td><input type="button" value="adicionar pedido"/></td></tr>     </table>     <br/>     locais:     <br/>     <br/>     <table id="loc_table">     <tr>     <td class="tableheader">local</td>     <td class="tableheader">comprimento</td>     <td class="tableheader">largura</td>     <td class="tableheader">foto</td>     </tr>     </table>    <!-- </form> -->     </td>     <td>     <!-- <form id='addloc' name='addped' action='#' method='post'> -->     <table>     <tr>     <td><label for="local">local</label></td>     <td><input type="text" id="local" /></td></tr><tr>     <td><label for="comp">comprimento</label></td>     <td><input type="text" id="comp" /></td></tr><tr>     <td><label for="larg">largura</label></td>     <td><input type="text" id="larg" /></td></tr><tr>     <td><label for="foto">foto</label></td>     <td><input type="file" id="foto" /></td></tr><tr>     <td></td>     <td><input type="button" value="acrescentar local" onclick="addloc()"/></td></tr>     </table>     </form>     </td>     </tr>     </table> 

can sugest me solution please!

thanks


Comments