如何在页面上实现点击按钮自动创建表单的功能（类似于网易邮箱的添加附件功能）

<div id="fileBlock"></div>
<a href="javascript: addFile()">添加附件</a>
<script language="javaScript">
var fileName = "attach[]"; //PHP的多文件名
function addFile()//增加函数
{
var fileBlock = document.getElementById("fileBlock");//得到div对象
var oDiv = document.createElement("div");//生成一个DIV对象
oDiv.innerHTML = "<input type=\"file\" name=\"" + fileName + "\" /> "
+ "<input type=\"button\" onclick=\"delFile(this)\""
+ " value=\"Del\" />"; //设置DIV对象中的HTML代码
fileBlock.appendChild(oDiv);//把这个DIV添加到fileBlock对象下面
}function delFile(obj)//删除函数
{
var oDiv = obj.parentNode;//得到生成的DIV对象
var fileBlock = document.getElementById("fileBlock");//得到fileBlock对象
fileBlock.removeChild(oDiv);//在fileBlock对象中删除生成的DIV对象
}
</script>

解决方案 »

  1.   

    document.getElementById()和document.createElement()是DOM（Document Object Model：文档对象模型）的方法，前者通过指定ID获得文档指定对象，后者建立一个指定标签名的元素。
      

  2.   

    不好意思，我还是一改代码就出错（主要是改div对象的html代码），二楼的朋友能否告诉我
    如何把代码中添加文件功能改成添加一个文本字段的表单？
      

  3.   

    今天在做照片上传的时候，示例网站的方法是由用户先选择要上传的照片数量
    然后根据用户的选择页面显示相应数量的file类型的input。分析后发现首先在
    <select name="num" onChange="javascript:changeNum(this);">
    <option value="25" >1……</option></select>中，当发现有变化时(onChange)自动调用js脚本changeNum(this)------------------------------------------------------------------
    js脚本如下：
    <script>
    var itemCount=0;function changeNum(sel)
    {
    var startIndex = 0;
    if (sel.value > itemCount)
    {
    startIndex = itemCount
    }
    else
    {
    addDiv.innerHTML = "";
    }
    for(var i = (startIndex+1);i<=parseInt(sel.value);i++)
    {
    var content ='<table width="100%" border="0"><TR valign="top"><TD align="right">'+i+'．上传照片：</TD><TD width = "35%" heigh = "30"><input type = "file" size = "31" name = "Pic'+i+'" Runat = "server"></TD><TD align="middle" width="37%"></TD></TR></table>';
    addDiv.innerHTML+=content;
    }
    itemCount = parseInt(sel.value);
    }
    </script>  
    在body中，定义了div，其id为addDiv
    sel为形参，在onChange="javascript:changeNum(this)，
    this即代表当前对象。addDiv.innerHTML是先根据id找到要找的div，在其中执行.innerHTML插入HTML语言
    在循环中是定义了一个字符串常量，然后addDiv.innerHTML+=content，即写出HTML标记Js中要innerHTML的HTML语言字符串要写在一行内(var contentd的写在一行)
    --------------------------------------------------------------------------------
    简单实现如下：<html>
    <script>
    var itemCount=0;function changeNum(sel)
    {
    var startIndex = 0;
    if (sel.value > itemCount)
    {
    startIndex = itemCount
    }
    else
    {
    addDiv.innerHTML = "";
    }
    for(var i = (startIndex+1);i<=parseInt(sel.value);i++)
    {
    var content ='<table width="100%" border="0"><TR valign="top"><TD align="right">'+i+'．上传照片：</TD><TD width = "35%" heigh = "30"><input type = "file" size = "31" name = "Pic'+i+'" Runat = "server"></TD><TD align="middle" width="37%"></TD></TR></table>';
    addDiv.innerHTML+=content;
    }
    itemCount = parseInt(sel.value);
    }
    </script> <head>
    </head>
    <body><from>
    ……
    <tr>
    <td>
    <select name="num" onChange="javascript:changeNum(this);">
    <option value="1" >1</option>
    <option value="2" >2</option>
    <option value="3" >3</option>
    <option value="4" >4</option>
    <option value="5" >5</option>
    </select></td></tr>
    ……
    <tr>
    <td>
    <dir id = addDiv>
    </dir>
    </td></tr>
    ……
    </from>
    </body>
    </html>
    这样，每当select不同值的时候，根据其中的变化即实现。