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

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

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

<FORM runat="server">

<DIV >

<INPUT TYPE="file" NAME="File1" runat="server">

<INPUT TYPE="button" VALUE="添加附件" onclick="javascript:AddFile();">

<INPUT TYPE="button" VALUE="删除附件" onclick="javascript:RemoveFile();">

<ASP:LISTBOX Width="200px" Height="100px" runat="server"></ASP:LISTBOX>

<ASP:BUTTON runat="server" Text="保存" Width="60px"></ASP:BUTTON>

</DIV>

<ASP:LITERAL Runat="server"></ASP:LITERAL>

</FORM>

<SCRIPT language="javascript">

<!--

function AddFile()

{

var file = document.getElementById("div1").firstChild;

if(file.value == "")

{

alert("请选择文件!");

return;

}

var o = new Option();

var ary = file.value.split("\");

var filename = ary[ary.length-1];

if(CheckOptionsExists(filename,document.getElementById("ListBox1")))

{

alert("文件已经存在列表中!");

return;

}

var f = document.createElement("input");

f.type = "file";

f.name = "file"

div1.insertBefore(f,div1.firstChild);

o.innerText = filename;

o.value = f.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]);

}

//检查选项是否存在.

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 = "保存成功!";

}

}

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1498648