[翻译]运用HtmlInputFile服务器控件上传多个文件

   由于发现以前写的文章都是乱来的，想到什么就写什么？看到别人的文章何等地规范，又通俗易懂，条理又很强，于是乎我就想了一个方法，来训练一下自己的写作方式，通过翻译一些老外的文章来玩玩，可能不断格式化自己可以写出格式不错的文章来，费话不用多说的，今天来翻译一篇比较简单的文章来做为这个计划的开始，OK！运用HtmlInputFile服务器控件上传多个文件[Upload multiple files using HtmlInputFile control]。

Published: 05 Feb 2006
By: Haissam Abdul Malak

在这篇文章中，我将讲述如何应用几个文件上传控件。本文将通过三个HtmlInputFile服务器控件同时上传三个文件的例子来讲述。

摘要：

当微软发布ASP.NET 1.0时就可以将本地文件上传到WEB服务器上，这通过HTML input file服务器控件就能够实现这样的操作，Html Input File服务器控件可以允许用户浏览本地文件。

现在让我们添加三个Html input file服务器控件，使得用户能够同时选取三个文件，并添加一个按扭Batch Upload，用于提交事件，使得三个文件上传到服务端。同时我们将过滤上传的文件，分别放在两类中：

    1.图片

     2.其它

我们将创建两个文件夹放于程序的根目录中，第一个命名为“Images”用于放置（JPG，GIF）文件，第二个为“Others”用于保存除以上两种文件以外有文件。

HTML代码

让我们来看一下，加入了三个HTML INPUT File服务器控件的HTML代码，代码如下：

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false"
2

Inherits="MultipleUpload.WebForm1" %>
3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
4

<HTML>
5

<HEAD>
6

<title>WebForm1</title>
7

7.1">
10

content="http://schemas.microsoft.com/intellisense/ie5">
14

</HEAD>
15

<body MS_POSITIONING="GridLayout">
16

<form id="Form1" method="post" runat="server">
17

<asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 280px;
18

POSITION: absolute; TOP: 101px" runat="server" Text="Batch Upload" />
19

<div id="Div1" runat="server" style="Z-INDEX:102;LEFT:165px;WIDTH:1026px;
20

POSITION:absolute;TOP:7px;HEIGHT:19px">
21

<INPUT id="FileUpload1" style="WIDTH: 389px; HEIGHT: 22px"
22

type="file" size="45" runat="server">
23

<asp:Label id="Label1" runat="server" Width="598px"
24

ForeColor="Red" />
25

</div>
26

<div id="Div2" runat="server" style="Z-INDEX:103;LEFT:166px;WIDTH:1026px;
27

POSITION:absolute;TOP:38px;HEIGHT:19px">
28

<INPUT style="WIDTH: 389px; HEIGHT: 22px" type="file"
29

size="45" runat="server" id="FileUpload2">
30

<asp:Label id="Label2" runat="server" Width="357px"
31

ForeColor="Red" />
32

</div>
33

<div id="Div3" runat="server" style="Z-INDEX:104;LEFT:166px;WIDTH:1026px;
34

POSITION:absolute;TOP:68px;HEIGHT:19px">
35

<INPUT style="WIDTH: 389px; HEIGHT: 22px" type="file"
36

size="45" runat="server" id="FileUpload3">
37

<asp:Label id="Label3" runat="server" Width="361px"
38

ForeColor="Red" />
39

</div>
40

</form>
41

</body>
42

</HTML>
43

以下图片显示以上代码解析后的浏览器显示的样式：

Code Behind

为了上传文件我们需要用到以下几个类：

    1.HttpFileCollection

    2.HttpPostedFile

    3.Request.Files

    4.System.IO.Path

HttpFileCollection类包含了一系列的HttpPostedFile，为上传服务器文件的一个集合，为了取得用户所选的文件我们要运用到Request.Files，它将返回一个文件集合保存于HttpFileCollection对象中。运用System.IO.Path来判断文件的扩展名以及文件名，我们将通过扩展名来将文件分成两类。

HttpFileCollection uploadFilCol = Request.Files;
2

for(int i=0;i<uploadFilCol.Count;i++)
3

{
4

HttpPostedFile file = uploadFilCol[i];
5

string fileExt = Path.GetExtension(file.FileName).ToLower();
6

string fileName = Path.GetFileName(file.FileName);
7

if(fileName != string.Empty)
8

{
9

try
10

{
11

if(fileExt == ".jpg" || fileExt == ".gif")
12

{
13

file.SaveAs(Server.MapPath("./Images/") + fileName);
14

}
15

else
16

{
17

file.SaveAs(Server.MapPath("./Others/") + fileName);
18

}
19

}
20

catch(Exception ex)
21

{
22

throw ex;
23

}
24

}
25

}

你可能发现我们通过Foreach从HttpFileCollection集合中取得HttpPostFile对象，将扩展名保存在fileExt变量中，将文件名保存在fileName变量中。然后我们判断它是个图片文件，通过HttpPostFile.SaveAs()方法来将上传的文件保存在“Images”文件夹下，将其它文件保存在还有一个文件夹“Others”下。

下一步我们将创建一个方法ShowMessages（）用来显示上传的状态：

private void ShowMessage(string message, int fileUploadPos )
2

{
3

if(fileUploadPos ==0)
4

{
5

Label1.Text = message;
6

}
7

else
8

{
9

if(fileUploadPos ==1)
10

{
11

Label2.Text = message;
12

}
13

else
14

{
15

Label3.Text = message;
16

}
17

}
18

}

ShowMessage方法共有两个参数，第一个参数是用于显示的字符串，第个个参数是HttpFileCollection的集合索引。

这个方法将用于显示上传各个文件的状态作息，以及判断是否返回一个错误信息，下面的截图显示上传成功后的状态信息：

完整代码：

HttpFileCollection uploadFilCol = Request.Files;
2

for(int i=0;i<uploadFilCol.Count;i++)
3

{
4

HttpPostedFile file = uploadFilCol[i];
5

string fileExt = Path.GetExtension(file.FileName).ToLower();
6

string fileName = Path.GetFileName(file.FileName);
7

if(fileName != string.Empty)
8

{
9

try
10

{
11

if(fileExt == ".jpg" || fileExt == ".gif")
12

{
13

file.SaveAs(Server.MapPath("./Images/") + fileName);
14

this.ShowMessage(" " + fileName + " Successfully Uploaded",i);
15

}
16

else
17

{
18

file.SaveAs(Server.MapPath("./Others/") + fileName);
19

this.ShowMessage(" " + fileName + " Successfully Uploaded",i);
20

}
21

}
22

catch(Exception ex)
23

{
24

this.ShowMessage(" " + ex.Message, i);
25

}
26

}
27

}

为了能够正常的运行，有两个要点需要我们注意：

1.如果你需要上传的文件超过4MB就需要修改配制文件Web.config中的<httpRuntime>节点的maxRequestLength属性的值，请注意单位为KB。

2.必需给ASPNET用户帐户能够上传文件到刚创建的两个文件夹的权限。

总结：

在这篇文章中，你可以看到HTML file服务器控件的强大之处，将代码加入到你的应用程序中就可以让用户同时上传多个文件到Web服务器中。

代码下载：

点击下载全部代码：MultipleUpload Control Library