最近有人问起动态多文件上传，想要做到类似于邮箱添加附件的效果，这个功能其实比较简单，就是往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 = " 保存成功! " ; } }