第26章 文件批量上传系统
本章视频教学录像：14分钟
文件上传是开发项目中必不可少的功能，也是用户和网站管理者之间的交流工具。本章使用JavaScript介绍如何动态地添加上传文件。
本章要点（已掌握的在方框中打钩）
□ 了解批量上传的原理
□ 创建数据库和数据表
□ 设计系统前台页面
□ 设计批量上传代码
□ 将批量上传系统添加至已有网站中
26.1 系统分析
本节视频教学录像：2分钟
网站建成后，用户希望能够保存一些文件信息到网站上，系统管理员由于工作的需要，经常要上传很多图片文件到系统中，如果能够批量上传信息，则能更好地满足需要。
本章使用ASP.NET和SQL Server 2008来创建一个批量上传系统。
26.1.1 系统目标
本系统需要实现的目标有以下4点。
⑴根据需要添加上传控件。
⑵根据需要删除上传控件。
⑶保存上传信息。
⑷显示上传信息。
26.1.2 系统原理
当用户需要上传文件时，单击【添加附件】按钮可以动态地增加上传控件，单击【删除】按钮可以移除多余的上传控件。用户选择好要上传的文件，单击【上传】按钮即可保存所有选定的文件信息到网站中。
26.1.3 技术要点
如何获取上传的文件个数呢？
当用户上传文件时，本系统通过Request的Files属性获得请求中的文件信息，然后根据获得的文件信息的个数逐个保存到网站中。如果用户未选择上传文件，那么得到的文件名肯定是空字符串，则不保存该条信息。代码将在26.3.4小节中介绍。
26.2 数据库分析及设计
本节视频教学录像：1分钟
根据分析，本系统需要用到数据库来存储上传文件保存的数据，所以在系统开发之前，首先要进行数据库的设计。
26.2.1 数据库分析
在批量上传系统中，需要保存用户上传的文件信息，包括文件名、保存的位置、保存的时间、文件的类型等信息。
26.2.2 创建数据库
在SQL Server 2008中创建数据库的具体步骤如下。
⑴选择【开始】
【所有程序】
【Microsoft SQL Server 2008】
【SQL Server Management Studio】，以【SQLServer身份验证】模式登录。
⑵在【对象资源管理器】窗口中的【数据库】节点上右击，在弹出的快捷菜单中选择【新建数据库】菜单项，弹出【新建数据库】对话框。
⑶在【数据库名称】文本框中输入“ch26DataBase”，在【数据库文件】列表框中使用默认设置“ch26DataBase”和“ch26DataBase_log”文件的路径，然后单击【确定】按钮，即可完成ch26DataBase数据库的创建。
26.2.3 创建数据表
本实例中需要一张记录上传文件相关信息的表，下面来创建数据表。
⑴在【对象资源管理器】中展开ch26DataBase节点，右击【表】节点，在弹出的快捷菜单中选择【新建表】菜单项。
⑵在打开的表编辑窗口中，按照下表进行输入。
⑶在【dbo.Table_1*】选项卡上右击，在弹出的快捷菜单中选择【保存】菜单项，弹出【选择名称】对话框，在【输入表名称】文本框中输入“tabUploadFile”，然后单击【确定】按钮，即可完成表的创建。
26.3 系统设计
本节视频教学录像：6分钟
在26.1.1小节中，我们已经提出了批量上传系统需要实现的4个目标，所以在系统设计时，需要设计4个模块来实现各个目标。
26.3.1 系统页面设计
首先设计系统的页面，页面中需要有【添加附件】按钮、【上传】按钮，上传控件在单击【添加附件】按钮时显示。
⑴在Visual Studio 2010中，新建【语言】为【Visual C#】的ASP.NET空网站，添加一个默认的Default.aspx页面。
⑵在Default.aspx页面的设计视图中，如图所示设计系统界面，所用控件及属性设置如表所示。
⑶为了动态添加上传控件，需要使用JavaScript脚本来实现此功能。在源视图的<title>< /title>标签对之后添加脚本函数（代码26-1.txt）。
01 <script language="javascript" type="text/javascript">
02 function AddFileCtrol() { //添加一个上传控件
03 var innerDiv=document.createElement("div"); //新建一个Div元素
04 document.getElementById("dv1").appendChild(innerDiv) //添加到Div元素中
05 var fileCtrol=document.createElement("input"); //建立 input元素
06 fileCtrol.name= "upFile"; //设置元素的名称
07 fileCtrol.type= "file"; //设置元素的类型
08 innerDiv.appendChild(fileCtrol); //添加到 fileCtrol元素
09 var btnCtrol=document.createElement("input"); //建立 input元素
10 btnCtrol.name= "btnDelete"; //设置元素的名称
11 btnCtrol.type= "button"; //设置元素的类型
12 btnCtrol.setAttribute("value", "删除 "); //设置元素的显示文字
13 btnCtrol.onclick= function() {DeleteFileCtrol(this.parentNode) }; //绑定删除上传控件函数到onclick事件
14 innerDiv.appendChild(btnCtrol); //添加到Div元素
15 }
16 function DeleteFileCtrol(obj) { //删除对应上传控件函数
17 document.getElementById("dv1").removeChild(obj);
18 }
19 < /script>
⑷在网站中添加1个名为“UserRegist.aspx”的Web页面，用于显示上传的文件信息以供下载。在UploadFileList.aspx页面的设计视图中，如图所示设计系统界面，所用控件及属性设置如表所示。
26.3.2 配置网站的Web.config
数据库和系统页面都设计好了，如何将它们连接起来呢？这就需要通过配置系统的Web.config文件来连接数据库。
在【解决方案资源管理器】中双击Web.config文件，打开Web.config的代码窗口，然后将<connectionStrings>和< /connectionStrings>之间的代码更换为以下代码。
<add name="ch26DataBase" connectionString="Data Source= localhost;Initial Catalog=ch26DataBase;User ID=sa;Password=123"/>
【代码详解】
此段代码的作用是添加一个数据库的连接字符串，“localhost”表示要连接当前本机的数据库，读者也可设定为数据库所在服务器的IP地址。数据库的名称为“ch26DataBase”。
26.3.3 数据库连接代码设计
在系统保存上传信息时要连接数据库，结束时要关闭此连接。所有的相关数据操作使用一个公共数据类来实现。
新建一个类文件，命名为“DataClass.cs”，添加GetSqlServerConn方法，用于获得数据库连接（代码26-2.txt）。
01 private SqlConnection GetSqlServerConn()
02 {
03 SqlConnection sqlConn; //定义SQlServer连接对象
04 string strConn = WebConfigurationManager.ConnectionStrings["ch26DataBase"].ConnectionString; //读取Web.config配置文件的ConnectionString节点获取连接字符串
05 sqlConn= new SqlConnection(strConn); //生成数据库连接对象
06 sqlConn.Open(); //打开数据库连接
07 return sqlConn; //返回数据库连接对象以供调用
08 }
继续添加CloseSqlServerConn方法，用于关闭数据库连接（代码26-3.txt）。
01 private void CloseSqlServerConn(SqlConnection sqlConn)
02 {
03 if (sqlConn.State==ConnectionState.Open) //如果数据库连接处于关闭状态，则打开此连接
04 {
05 sqlConn.Close();
06 }
07 }
26.3.4 保存上传信息代码设计
有了数据库连接，我们就可以通过它保存上传文件的信息，系统可以将此信息保存至数据库。在公共类中继续添加SaveFilesInfo方法来保存上传文件的信息内容（代码26-4.txt）。
01 public bool SaveFilesInfo(HttpFileCollection fileColl)
02 {
03 SqlConnection sqlConn;
04 SqlCommand sqlComm;
05 string strComm=@"insert into
06 tabUploadFile(NewFileName,OldFileName,SaveAddress,UploadTime,TypeName)
07 values(@NewFileName,@OldFileName,@SaveAddress,@UploadTime,@ TypeName)";
08 sqlConn=GetSqlServerConn(); //调用方法获取数据库连接
09 SqlTransaction sqlTran= sqlConn.BeginTransaction(); //开始数据库事务
10 StringBuilder sbFileName;
11 try
12 {
13 sqlComm= new SqlCommand(strComm, sqlConn);
14 sqlComm.Transaction= sqlTran; //指定命令要使用的事务
15 for (int i= 0; i< fileColl.Count; i++) //循环保存上传信息
16 {
17 if (!String.IsNullOrEmpty(fileColl[i].FileName))
18 {
19 sbFileName= new StringBuilder(); //使用年月日时分秒毫秒生成文件名
20 sbFileName.Append(DateTime.Now.Year);
21 sbFileName.Append(DateTime.Now.Month);
22 sbFileName.Append(DateTime.Now.Day);
23 sbFileName.Append(DateTime.Now.Hour);
24 sbFileName.Append(DateTime.Now.Minute);
25 sbFileName.Append(DateTime.Now.Second);
26 sbFileName.Append(DateTime.Now.Millisecond);
27 sbFileName.Append(Path.GetExtension(fileColl[i].FileName));
28 sqlComm.Parameters.Clear(); //清空以前参数，指定当前SQL命令参数
29 sqlComm.Parameters.AddWithValue("@NewFileName", sbFileName.ToString());
30 sqlComm.Parameters.AddWithValue("@OldFileName", Path.GetFileName(fileColl[i].FileName));
31 sqlComm.Parameters.AddWithValue("@SaveAddress", System.Web.HttpContext.Current.Server.MapPath("～/Upload/"));
32 sqlComm.Parameters.AddWithValue("@UploadTime",DateTime.Now);
33 sqlComm.Parameters.AddWithValue("@TypeName", Path.GetExtension (fileColl[i].FileName));
34 sqlComm.ExecuteNonQuery(); //执行SQL命令
35 fileColl[i].SaveAs(System.Web.HttpContext.Current.Server.MapPath("～/Upload/") +sbFileName.ToString()); //保存对应的文件到服务器
36 }
37 }
38 sqlTran.Commit(); //提交事务保存数据
39 return true;
40 }
41 catch (Exception ex)
42 {
43 sqlTran.Rollback(); //发生异常回滚事务
44 CloseSqlServerConn(sqlConn); //关闭数据库连接
45 return false;
46 }
47 }
26.3.5 获取上传文件信息代码设计
对用户上传的文件信息可以随时下载，因此需要将上传的文件信息显示给用户。在公共类中继续添加GetFilesInfo方法来获取上传文件的信息内容（代码26-5.txt）。
01 public DataTable GetFilesInfo()
02 {
03 SqlConnection sqlConn;
04 SqlDataAdapter sqlAdpt;
05 DataTable dtFilesInfo;
06 string strComm = "select NewFileName,OldFileName,SaveAddress,UploadTime,TypeName from tabUploadFile";
07 try
08 {
09 sqlConn=GetSqlServerConn();
10 sqlAdpt= new SqlDataAdapter(strComm, sqlConn); //使用数据适配器读取数据
11 dtFilesInfo= new DataTable();
12 sqlAdpt.Fill(dtFilesInfo); //填充数据到DataTable
13 return dtFilesInfo;
14 }
15 catch (Exception ex)
16 {
17 throw ex;
18 }
19 }
26.3.6 保存上传文件的事件代码设计
用户选择好上传的文件之后，单击【上传】按钮可以保存文件信息。在Default.aspx设计页面双击“上传”按钮自动添加事件btnUpload_Click方法，添加以下代码（代码26-6.txt）。
01 protected void btnUpload_Click(object sender,EventArgs e)
02 {
03 HttpFileCollection fileColl=Request.Files; //获取当前请求中所有的文件信息
04 DataClass dc= new DataClass();
05 bool bResult= false; //判断保存是否成功
06 try
07 {
08 bResult=dc.SaveFilesInfo(fileColl);
09 }
10 catch (Exception ex) { }
11 if (bResult)
12 {
13 Response.Write("<script>alert('文件保存成功！ ')< /script>");
14 }
15 else
16 {
17 Response.Write("<script>alert('文件保存失败！ ')< /script>");
18 }
19 }
26.3.7 下载上传文件的事件代码设计
本系统将用户上传的文件信息显示在页面上，当单击对应信息的时候，可以下载该文件。在UploadFileList.aspx设计页面空白处双击添加Page_Load窗体事件，添加以下代码（代码26-7.txt）。
01 protected void Page_Load(object sender,EventArgs e)
02 {
03 if (!IsPostBack) //第一次打开页面绑定文件信息到GridView控件
04 {
05 this.grdFileList.DataSource= new DataClass().GetFilesInfo(); //绑定文件信息数据
06 this.grdFileList.DataBind();
07 }
08 }
由于页面显示文件名的字段NavigateUrl属性使用了一个处理方法GetFileUrl生成保存在服务器端的文件名，所以需要继续添加GetFileUrl方法（代码26-8.txt）。
01 public string GetFileUrl(string strAddress, string strFileName)
02 {
03 return strAddress+ strFileName; //获取服务器保存的文件实际路径和实际文件名
04 }
26.4 运行系统
本节视频教学录像：2分钟
下面来看系统运行的效果。
⑴按【F5】或【Ctrl+F5】快捷键，在浏览器中运行该程序，页面中将显示【添加附件】和【上传】按钮。
⑵单击【添加附件】按钮，可自动生成一个上传控件和一个【删除】按钮。连续单击可生成多个上传控件，单击【删除】按钮可删除对应的上传控件。
⑶单击【上传】按钮，将文件信息保存到数据库中并将文件保存至服务器，保存完成后返回提示信息，如图所示。
⑷用户可以访问UploadFileList.aspx页面查看上传的文件信息，如图所示。
⑸用户单击对应的文件名或目标执行另存为操作可以下载该文件。
26.5 在我的网站中应用本系统
本节视频教学录像：1分钟
将Default.aspx页面中相关的代码拷贝至一个已存在页面作为部分代码，或者将该页面改名后作为一个链接添加至已有页面中即可。其余相关代码文件无需改动，拷贝至已有网站对应的位置就可以运行。应该根据具体情况修改数据库表，可以在其中添加一个用户字段，以区分每个用户上传的文件信息。更多的细化功能读者可自行练习，这里不再赘述。
26.6 开发过程中的常见问题及解决方式
本节视频教学录像：2分钟
开发过程中应该注意以下几点。
⑴使用JavaScript脚本语言时，读者要熟练掌握使用脚本语言生成Html控件的方法，特别要注意脚本事件是如何绑定到对应按钮上的。
⑵保存上传文件的时候，一般情况下都要对文件进行改名保存，以防止重名文件的出现。常用的方法是取得当前系统时间加上毫秒级的时间组成新的文件名。
⑶在GridView显示数据的时候，我们会发现保存的文件路径和文件名称需要组合成一个字段显示，这时需要一个转换函数，即代码中提到的GetFileUrl (string strAddress, string strFileName)函数，此函数将两个字段信息组合后重新绑定到GridView控件上。需要注意的是此函数一定要是Public类型的，否则前端页面代码不能使用此函数。
⑷在GridView显示数据的时候，我们还会发现日期字段显示的时候会出现年月日时分秒的格式，为了去除多余的时间，需要格式化该字段，需要使用DataFormatString="{0:yyyy-MM-dd}"，使日期只显示年月日的格式。但是需要注意的是，一定要把HtmlEncode属性设置为False，否则DataFormatString属性不起作用。
⑸在使用上传控件上传文件信息的时候，一定要注意在form 标签的属性中添加“enctype="multipart/form-data"”代码，否则使用Request的Files属性将获取不到请求中的文件信息。
⑹当同时上传多个文件的时候，要注意事务的使用，以确保多个文件同时上传成功。否则用户不知道哪些文件上传成功，哪些失败，将造成使用上的不便。