在做asp.net的Web开发的时候，我们经常会遇到一次性上传多个文件的需求。通常我们的解决方法是固定放多个上传文件框，这样的解决办法显然是不合理的，因为一次上传多个，就意味着数量不确定。因此我们就要让这些文件上传框动态添加，下面我以我做的一个图库管理中的上传图片的功能为例
先看效果：
打开的初始界面： 
默认是上传一个图片，但当我们点“增加图片”按钮时可以实现选择多个图片及其描述同时上传，本功能限制一次最多只能上传8张，且每张图片大小不超过1M，这个大家可根据实际情况更改！
如图： 
下面来看实现过程：
第一步，使用javascript代码实现动态添加文件上传框和描述文本框，关键代码如下：
复制代码 代码如下:
<script type="text/javascript">
var i=1
function addFile()
...{
if (i<8)
...{var str = '<BR> <input type="file" runat="server"/>描述：<input type="text" maxlength="20" />'
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
}
else
...{
alert("您一次最多只能上传8张图片！")
}
i++
}
</script>HTML调用代码为：
<P><INPUT type="button" value="增加图片(Add)"><br />
<input type="file" runat="server"/>
描述：<input type="text" maxlength="20" />
第二步：服务器端代码实现
就上传单个文件或图片来说，使最普通不过的了，但是对于这样的一次性上传多个文件以及它们相应的描述的问题，就要费点周折
首先，通过System.Web.HttpContext.Current.Request.Files方法获取客户端的文件集合，然后通过Request.Form方法获得描述文本框集合，最后利用一个循环将文件上传，并将相应的信息保存到数据库
关键代码如下：
复制代码 代码如下:
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
string[] rd = Request.Form[1].Split(',');//获得图片描述的文本框字符串数组，为对应的图片的描述
string albumid=ddlAlbum.SelectedValue.Trim();
int ifile;
for (ifile = 0; ifile < files.Count; ifile++)
...{
if (files[ifile].FileName.Length > 0)
...{
.......................... //上传单个文件并保存相关信息
}
}
最后给出上述功能的全部代码:
HTML代码:
复制代码 代码如下:
<%...@ Page Language="C#" CodeFile="UploadImg.aspx.cs" Inherits="NetAdmin_APicture_UploadImg" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">...
var i=1
function addFile()
...{
if (i<8)
...{var str = '<BR> <input type="file" runat="server"/>描述：<input type="text" maxlength="20" />'
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
}
else
...{
alert("您一次最多只能上传8张图片！")
}
i++
}
</script>
<link href="https://www.cnblogs.com/NetAdmin/Site.Css" type="text/css" />
</head>
<body>
<form runat="server">
<div>
<table cellpadding="1" cellspacing="1"
style="height: 58px">
<tr>
<td background="../images/topbg1.jpg">
<font color="#0000ff" face="宋体" size="3"><strong>上传图片</strong></font></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<asp:Panel runat="server">
<table>
<tr>
<td>
</td>
<td>
说明：点增加图片按钮可一次上传多张图片，可为每张图片写上一句不超过20个字的描述。单张图片大小不大于1024k</td>
</tr>
<tr>
<td>
请选择图片：<br />
</td>
<td><P><INPUT type="button" value="增加图片(Add)"><br />
<input type="file" runat="server"/>
描述：<input type="text" maxlength="20" />
</td>
</tr>
<tr>
<td>
上传到的图库：</td>
<td>
<asp:DropDownList runat="server" DataSourceID="SqlDataSource1"
DataTextField="AlbumName" DataValueField="AlbumID">
</asp:DropDownList><asp:SqlDataSource runat="server" ConnectionString="<%$ ConnectionStrings:WebJakeCS %>"
SelectCommand="SELECT [AlbumID], [AlbumName] FROM [WB_Album] ORDER BY [AlbumID] DESC">
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button runat="server" Text="开始上传" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Label runat="server" Font-Bold="True" ForeColor="Red"></asp:Label></td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td>
<font face="宋体"></font><font face="宋体"> </font>
</td>
</tr>
<tr>
<td>
<font face="宋体"></font>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
后台代码:
复制代码 代码如下: