html中实现添加输入框怎么实现?

譬如:
    以前的QQ上传照片当你点击上传时会出现5个输入框,在这个输入框中你可以选择照片的路径.当还有照片要上传时就点击添加,便会再出现一个输入框你可以再输入5张照片的地址.这个怎么实现啊?有没有代码?

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <script language="JavaScript" type="text/JavaScript">
        function addtext(){
        var threadsCount = document.getElementById("addtexta").value;    //threadsCount 表示你要插入的个数
        if(threadsCount!=''&&parseInt(threadsCount)>0){
            var tr=document.createElement("tr");
            tr.id=1;
            var td; 
            for(var i=1;i<=10;i++){
                td=document.createElement("td"); 
                td.id=tr.id+"/"+i;
                td.width="10%";
                td.appendChild(document.createTextNode(""));
                tr.appendChild(td);
            }
            document.getElementById("newbody").appendChild(tr);
            tr=document.createElement("tr");
            tr.id=2;
            
            for(var i=1;i<=parseInt(threadsCount);i++){
               td=document.createElement("td"); 
               td.id=tr.id+"/"+i+1;
               var btn;
               if(i<10){
                       btn = document.createElement("<INPUT type='file'  id='thread0"+i+"' name='thread0"+i+"' value='thread0"+i+"'>");
               
               }
               td.appendChild(btn);
               td.align="left";
               tr.appendChild(td);
               if(i%10==0&&i!=1){
                       document.getElementById("newbody").appendChild(tr);
                       tr=document.createElement("tr");
                    tr.id=i/10+2;
               }
            }
            document.getElementById("newbody").appendChild(tr);
        }
        }
    </script>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT=""></HEAD><BODY>
    <INPUT type='button'  id='addtext' name='addtext' value='addtext' onclick="addtext()">
    <INPUT type='text'  id='addtexta' name='addtexta' value='1'>
    <table align="center" width="80%" id="loglst" width="80%" border="0"
        cellspacing="0" cellpadding="0">
        <tbody id="newbody"></tbody>
    </table></BODY>
    </HTML>
    应该能满足要求。输入框数字你改几就是几个了
      

  2.   

    再发个兼容ff的：<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
        <script type="text/javascript">
        var divfiles;
        function addFileInput() {
            divfiles=document.getElementById("divfiles");
            var filesCount=divfiles.childNodes.length;
            if(filesCount==1) {
                document.getElementById("remove").style.visibility="visible";
            } else if(filesCount==4) {
                document.getElementById("add").style.visibility="hidden";
            }
            var fileInput="<div>第"+(filesCount+1)+"个文件：<input name=\"myfile\" type=\"file\"/></div>";
            divfiles.insertAdjacentHTML("beforeEnd",fileInput);
        }
        function removeLastInput() {
            var filesCount=divfiles.childNodes.length;
            if(filesCount==2) {
                document.getElementById("remove").style.visibility="hidden";
            } else if(filesCount==5) {
                document.getElementById("add").style.visibility="visible";
            }
            divfiles.removeChild(divfiles.lastChild);
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server" enctype="multipart/form-data">
        <div>
        <table >
        <tr>
            <th colspan="2">多文件上传</th>
        </tr>
        <tr>
            <td valign="top">上传文件</td>
            <td>
            <div id="divfiles">
            <div><input id="File1" name="myfile" type="file"  />&nbsp;&nbsp;<a id="add" href="javascript:addFileInput()">添加</a>&nbsp;&nbsp;<a id="remove" style="visibility:hidden" href="javascript:removeLastInput()">移除</a></div>        
            </div></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="Button1" runat="server" onserverclick="Button1_ServerClick" type="button"
                value="上传" /></td>
        </tr>
        </table>
            
            
         </div>
        </form>
    </body>
    </html>
      

  3.   

    简单的方法就是先做好这5个，然后设置为不可见，用的时候把visible 改成可见
      

  4.   


    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    var num=1;//行的初始id
    var rowNum=5;//一次添加的个数
    function $(elem)
    {
        return typeof elem=="string"?document.getElementById(elem):elem;
    }
    function addText()
    {
        var tab=$("tab"); 
        var row=tab.insertRow(-1); 
        row.id="row"+num; 
        var cell1=row.insertCell(-1); 
        cell1.innerHTML="<INPUT type='file' id='file"+num+"'>";    
        num++; 
    }
    function init_table()
    {
        for(var i=0;i<5;i++)
        {
            addText();
        }
    }
    </script>
    </head>
    <body onload="init_table();">
    <table id="tab" border=1 width=200px >
    </table>
    <input type="button" onclick="addText()" value="add">
    </body>
    </html>
      

  5.   

    用jauery，以前我写过。忘了。