asp.net 动态添加多附件上传.

最近有人问起动态多文件上传，想要做到类似于邮箱添加附件的效果，这个功能其实比较简单，就是往form中添加file元素。在用户选择完文件后，再添加一个file控件，由于file控件过多，视觉上不好看，所以隐藏之前的控件，保持页面上只有一个控件，同时把文件名添加到附件列表中。

 注意：页面上初始的file控件必须有runat="server"标志。也就是说，这个页面上必须至少有一个runat="server"的file控件，否则后台接收不到Request.Files。

<FORM id="form1" runat="server">             <DIV id="div1">                 <INPUT ID="File1" TYPE="file" NAME="File1" runat="server">                 <INPUT TYPE="button" VALUE="添加附件" onclick="javascript:AddFile();">                 <INPUT TYPE="button" VALUE="删除附件" onclick="javascript:RemoveFile();">                 <ASP:LISTBOX id="ListBox1" Width="200px" Height="100px" runat="server"></ASP:LISTBOX>                 <ASP:BUTTON id="Button1" runat="server" Text="保存" Width="60px"></ASP:BUTTON>             </DIV>             <ASP:LITERAL ID="lResult" Runat="server"></ASP:LITERAL>                       </FORM>

 

<SCRIPT language="javascript"><!--  function AddFile()  {            var file = document.getElementById("div1").firstChild;     if(file.value == "")     {         alert("请选择文件!");         return;     }          var ary = file.value.split("/");     var filename = ary[ary.length-1];          var bAddFile = true;     if(CheckOptionsExists(filename,document.getElementById("ListBox1")))     {                  alert("文件已经存在列表中!");         div1.removeChild(file);         bAddFile = false;              }               var f = document.createElement("input");     f.type = "file";     f.name = "file"          div1.insertBefore(f,div1.firstChild);          if(!bAddFile)     {         return     }     var o = new Option();     o.innerText = filename;     o.value = file.uniqueID;     document.getElementById("ListBox1").appendChild(o);          file.style.display = "none";                  }    function RemoveFile()  {     var lst = document.getElementById("ListBox1");     if(lst.selectedIndex == -1)     {         alert("请选择要删除的附件!");         return;     }          var id = lst.value;     div1.removeChild(document.all[id]);     lst.removeChild(lst.options[lst.selectedIndex]);     div1.firstChild.style.display = "";        }    //检查选项是否存在. function CheckOptionsExists(value,ddl)  {     for(var i=0;i<ddl.options.length;i++)     {         if(ddl.options[i].innerText == value)         {             return true;         }     }     return false;  }       //-->        </SCRIPT>

 

 

后台代码就比较简单了。没有过多的处理，只是一个简单的保存。

 

private void Button1_Click(object sender, System.EventArgs e)         {                           for(int i=0;i<Request.Files.Count;i++)             {                 if(Request.Files[i].ContentLength >0)                 {                     string filename = System.IO.Path.GetFileName(Request.Files[i].FileName);                     Request.Files[i].SaveAs(Server.MapPath(filename));                     this.ListBox1.Items.Add(new ListItem(filename,filename));                 }
                this.lResult.Text = "保存成功!";             }                      }