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;
}
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;
}
浙公网安备 33010602011771号