在做asp.net的Web开发的时候,我们经常会遇到一次性上传多个文件的需求。通常我们的解决方法是固定放多个上传文件框,这样的解决办法显然是不合理的,因为一次上传多个,就意味着数量不确定。因此我们就要让这些文件上传框动态添加,下面我以我做的一个图库管理中的上传图片的功能为例
先看效果:
打开的初始界面:
默认是上传一个图片,但当我们点“增加图片”按钮时可以实现选择多个图片及其描述同时上传,本功能限制一次最多只能上传8张,且每张图片大小不超过1M,这个大家可根据实际情况更改!
如图:
下面来看实现过程:
第一步,使用javascript代码实现动态添加文件上传框和描述文本框,关键代码如下:
<
script type
=
"
text/javascript
"
>
var i = 1
function addFile()
... {
if (i<8)
...{ var str = '<BR> <input type="file" name="File" runat="server" style="width: 300px"/>描述:<input name="text" type="text" style="width: 150px" maxlength="20" />'
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
}
else
...{
alert("您一次最多只能上传8张图片!")
}
i++
}
</ script >
var i = 1
function addFile()
... {
if (i<8)
...{ var str = '<BR> <input type="file" name="File" runat="server" style="width: 300px"/>描述:<input name="text" type="text" style="width: 150px" maxlength="20" />'
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
}
else
...{
alert("您一次最多只能上传8张图片!")
}
i++
}
</ script >
<
P
id
="MyFile"
><
INPUT
onclick
="addFile()"
type
="button"
value
="增加图片(Add)"
><
br
/>
< input type ="file" name ="File" runat ="server" style ="width: 300px" />
描述: < input name ="text" type ="text" style ="width: 150px" maxlength ="20" />
< input type ="file" name ="File" runat ="server" style ="width: 300px" />
描述: < input name ="text" type ="text" style ="width: 150px" 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)
...{
.......................... //上传单个文件并保存相关信息
}
}
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#" AutoEventWireup="true" 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" >
<! 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" >