asp.net 2.0中允许一次上传多个文件的设计
在asp.net 2.0中，可以结合dhtml来实现在用户上传完一个文件后，再点“继续上传”，而动态增加上传文件框
首先是前台的页面
<script language="javascript" type="text/javascript">
function addFile(max)
{
var file = document.getElementsByName("File");
if(file.length == 1 && file[0].disabled == true)
{
file[0].disabled = false;
return;
}
if(file.length < max)
{
var filebutton = '<br /><input type="file" size="50" name="File" class="Button" />';
document.getElementById('FileList').insertAdjacentHTML("beforeEnd",filebutton);
}
}
</script>
</head>
<body>
<form id="form1" runat="server" method="post" enctype="multipart/form-data">
<table class="Text" border="0" cellpadding="3" bgcolor="Black" cellspacing="1">
<tr bgcolor="white">
<td>所属分类：</td>
<td width="90%">
<asp:DropDownList ID="ddlCategory" runat="server" SkinID="ddlSkin" Width="336px"></asp:DropDownList>
</td>
</tr>
<tr bgcolor="white">
<td valign="top">选择照片：</td>
<td width="90%">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<p id="FileList"><input type="file" disabled="disabled" size="50" name="File" class="Button" /></p>
</td>
<td valign="top"><input type="button" value='增加一张照片' class="Button" onclick="addFile(<%= MAXPHOTOCOUNT %>)" /><font color="red">（最多上传 <%=MAXPHOTOCOUNT%> 张照片）</font><br /> 单击此按钮增加一个上传照片按钮。如果文件的名称或者内容为空，则不上传该照片。</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="white">
<td> </td>
<td width="90%">
<asp:Button ID="btnCommit" runat="server" Text="提交" SkinID="btnSkin" Width="100px" OnClick="btnCommit_Click" /> <asp:Label ID="lbMessage" runat="server" CssClass="Text" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
这里使用了一个javascript，来动态生成多个上传文件框，注意这里用了一个DHTML的函数insertAdjacentHTML，用法如下
加html内容(insertAdjacentHTML和insertAdjacentText)
dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法：在指定的地方插入html标签语句。
原型：insertAdjacentHTML(swhere,stext)
参数：
swhere:指定插入html标签语句的地方，有四种值可以用：
1.beforeBegin:插入到标签开始前
2.afterBegin:插入到标签开始标记后
3.beforeEnd:插入到标签结束标记前
4.afterEnd:插入到标签结束标记后
stext:要插入的内容
例：var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>"
var sScript='<SCRIPT DEFER>'
sScript = sScript + 'function go2(){ alert("Hello from inserted script.") }'
sScript = sScript + '</script' + '>';
ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);
在html正文中加入一行：
<DIV ID="ScriptDiv"></Div>
最终变成：
<DIV ID="ScriptDiv">
<input type=button onclick=go2() value='Click Me'><BR>
<SCRIPT DEFER>
function go2(){alert("Hello from inserted sctipt.")}'
</script>
</DIV>
insertAdjacentText方法与insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同
接下来就可以用FOR循环去处理了
protected void btnCommit_Click(object sender,EventArgs e)
{
if(ddlCategory.SelectedIndex <= 0) return;
///获取上载文件的列表
HttpFileCollection fileList = HttpContext.Current.Request.Files;
if(fileList == null) return;
Album album = new Album();
try
{ ///上载文件列表中的每一个文件
for(int i = 0; i < fileList.Count; i++)
{ ///获取当前上载的文件
HttpPostedFile postedFile = fileList[i];
if(postedFile == null) continue;
///获取上载文件的文件名称
string fileName = Path.GetFileNameWithoutExtension(postedFile.FileName);
string extension = Path.GetExtension(postedFile.FileName);
if(string.IsNullOrEmpty(extension) == true) continue;
///判断文件是否合法
bool isAllow = false;
foreach(string ext in AjaxAlbumSystem.ALLOWPHOTOFILELIST)
{
if(ext == extension.ToLower())
{
isAllow = true;
break;
}
}
if(isAllow == false) continue;
///获取基于时间的文件名称
string timeFilename = AjaxAlbumSystem.CreateDateTimeString();
///获取保存在数据库中的URL
string url = "Photoes/" + timeFilename + extension;
///获取全路径
string fullPath = Server.MapPath(url);
///上载文件
postedFile.SaveAs(fullPath);
///添加文件到数据库中
album.AddPhoto(fileName,url,postedFile.ContentType,postedFile.ContentLength,
Int32.Parse(ddlCategory.SelectedValue));
}
}
catch(Exception ex)
{ ///显示上载文件的操作失败消息
lbMessage.Text = "上载文件错误，错误原因为：" + ex.Message;
return;
}
首先是前台的页面
<script language="javascript" type="text/javascript">
function addFile(max)
{
var file = document.getElementsByName("File");
if(file.length == 1 && file[0].disabled == true)
{
file[0].disabled = false;
return;
}
if(file.length < max)
{
var filebutton = '<br /><input type="file" size="50" name="File" class="Button" />';
document.getElementById('FileList').insertAdjacentHTML("beforeEnd",filebutton);
}
}
</script>
</head>
<body>
<form id="form1" runat="server" method="post" enctype="multipart/form-data">
<table class="Text" border="0" cellpadding="3" bgcolor="Black" cellspacing="1">
<tr bgcolor="white">
<td>所属分类：</td>
<td width="90%">
<asp:DropDownList ID="ddlCategory" runat="server" SkinID="ddlSkin" Width="336px"></asp:DropDownList>
</td>
</tr>
<tr bgcolor="white">
<td valign="top">选择照片：</td>
<td width="90%">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<p id="FileList"><input type="file" disabled="disabled" size="50" name="File" class="Button" /></p>
</td>
<td valign="top"><input type="button" value='增加一张照片' class="Button" onclick="addFile(<%= MAXPHOTOCOUNT %>)" /><font color="red">（最多上传 <%=MAXPHOTOCOUNT%> 张照片）</font><br /> 单击此按钮增加一个上传照片按钮。如果文件的名称或者内容为空，则不上传该照片。</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="white">
<td> </td>
<td width="90%">
<asp:Button ID="btnCommit" runat="server" Text="提交" SkinID="btnSkin" Width="100px" OnClick="btnCommit_Click" /> <asp:Label ID="lbMessage" runat="server" CssClass="Text" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
这里使用了一个javascript，来动态生成多个上传文件框，注意这里用了一个DHTML的函数insertAdjacentHTML，用法如下
加html内容(insertAdjacentHTML和insertAdjacentText)
dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法：在指定的地方插入html标签语句。
原型：insertAdjacentHTML(swhere,stext)
参数：
swhere:指定插入html标签语句的地方，有四种值可以用：
1.beforeBegin:插入到标签开始前
2.afterBegin:插入到标签开始标记后
3.beforeEnd:插入到标签结束标记前
4.afterEnd:插入到标签结束标记后
stext:要插入的内容
例：var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>"
var sScript='<SCRIPT DEFER>'
sScript = sScript + 'function go2(){ alert("Hello from inserted script.") }'
sScript = sScript + '</script' + '>';
ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);
在html正文中加入一行：
<DIV ID="ScriptDiv"></Div>
最终变成：
<DIV ID="ScriptDiv">
<input type=button onclick=go2() value='Click Me'><BR>
<SCRIPT DEFER>
function go2(){alert("Hello from inserted sctipt.")}'
</script>
</DIV>
insertAdjacentText方法与insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同
接下来就可以用FOR循环去处理了
protected void btnCommit_Click(object sender,EventArgs e)
{
if(ddlCategory.SelectedIndex <= 0) return;
///获取上载文件的列表
HttpFileCollection fileList = HttpContext.Current.Request.Files;
if(fileList == null) return;
Album album = new Album();
try
{ ///上载文件列表中的每一个文件
for(int i = 0; i < fileList.Count; i++)
{ ///获取当前上载的文件
HttpPostedFile postedFile = fileList[i];
if(postedFile == null) continue;
///获取上载文件的文件名称
string fileName = Path.GetFileNameWithoutExtension(postedFile.FileName);
string extension = Path.GetExtension(postedFile.FileName);
if(string.IsNullOrEmpty(extension) == true) continue;
///判断文件是否合法
bool isAllow = false;
foreach(string ext in AjaxAlbumSystem.ALLOWPHOTOFILELIST)
{
if(ext == extension.ToLower())
{
isAllow = true;
break;
}
}
if(isAllow == false) continue;
///获取基于时间的文件名称
string timeFilename = AjaxAlbumSystem.CreateDateTimeString();
///获取保存在数据库中的URL
string url = "Photoes/" + timeFilename + extension;
///获取全路径
string fullPath = Server.MapPath(url);
///上载文件
postedFile.SaveAs(fullPath);
///添加文件到数据库中
album.AddPhoto(fileName,url,postedFile.ContentType,postedFile.ContentLength,
Int32.Parse(ddlCategory.SelectedValue));
}
}
catch(Exception ex)
{ ///显示上载文件的操作失败消息
lbMessage.Text = "上载文件错误，错误原因为：" + ex.Message;
return;
}