[翻译]运用HtmlInputFile服务器控件上传多个文件-阿里云开发者社区

开发者社区> 开发与运维> 正文

[翻译]运用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代码,代码如下:

 1ExpandedBlockStart.gif<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" 
 2ExpandedBlockEnd.gifInherits="MultipleUpload.WebForm1" 
%>
 3None.gif<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 4None.gif<HTML>
 5None.gif  <HEAD>
 6None.gif    <title>WebForm1</title>
 7None.gif    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 
 8None.gif
 9None.gif7.1">
10None.gif    <meta name="CODE_LANGUAGE" Content="C#">
11None.gif    <meta name="vs_defaultClientScript" content="JavaScript">
12None.gif    <meta name="vs_targetSchema" 
13None.gif    content="http://schemas.microsoft.com/intellisense/ie5">
14None.gif  </HEAD>
15None.gif  <body MS_POSITIONING="GridLayout">
16None.gif    <form id="Form1" method="post" runat="server">
17None.gif      <asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 280px; 
18None.gif        POSITION: absolute; TOP: 101px" runat="server" Text="Batch Upload" />
19None.gif       <div id="Div1" runat="server" style="Z-INDEX:102;LEFT:165px;WIDTH:1026px;
20None.gif       POSITION:absolute;TOP:7px;HEIGHT:19px">
21None.gif          <INPUT id="FileUpload1" style="WIDTH: 389px; HEIGHT: 22px" 
22None.gif            type="file" size="45" runat="server">
23None.gif          <asp:Label id="Label1" runat="server" Width="598px" 
24None.gif            ForeColor="Red" />
25None.gif       </div>
26None.gif       <div id="Div2" runat="server" style="Z-INDEX:103;LEFT:166px;WIDTH:1026px;
27None.gif       POSITION:absolute;TOP:38px;HEIGHT:19px">
28None.gif          <INPUT style="WIDTH: 389px; HEIGHT: 22px" type="file" 
29None.gif          size="45" runat="server" id="FileUpload2">
30None.gif          <asp:Label id="Label2" runat="server" Width="357px" 
31None.gif          ForeColor="Red" />
32None.gif        </div>
33None.gif       <div id="Div3" runat="server" style="Z-INDEX:104;LEFT:166px;WIDTH:1026px;
34None.gif       POSITION:absolute;TOP:68px;HEIGHT:19px">
35None.gif          <INPUT style="WIDTH: 389px; HEIGHT: 22px" type="file" 
36None.gif          size="45" runat="server" id="FileUpload3">
37None.gif          <asp:Label id="Label3" runat="server" Width="361px" 
38None.gif          ForeColor="Red" />
39None.gif       </div>
40None.gif    </form>
41None.gif  </body>
42None.gif</HTML>
43None.gif

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

  
Code Behind

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

    1.HttpFileCollection

    2.HttpPostedFile

    3.Request.Files

    4.System.IO.Path

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

 1None.gifHttpFileCollection uploadFilCol = Request.Files;
 2None.giffor(int i=0;i<uploadFilCol.Count;i++)
 3ExpandedBlockStart.gif{
 4InBlock.gif  HttpPostedFile file = uploadFilCol[i];
 5InBlock.gif  string fileExt = Path.GetExtension(file.FileName).ToLower();
 6InBlock.gif  string fileName = Path.GetFileName(file.FileName);
 7InBlock.gif  if(fileName != string.Empty)
 8ExpandedSubBlockStart.gif  {
 9InBlock.gif    try
10ExpandedSubBlockStart.gif    {
11InBlock.gif      if(fileExt == ".jpg" || fileExt == ".gif")
12ExpandedSubBlockStart.gif      {
13InBlock.gif        file.SaveAs(Server.MapPath("./Images/"+ fileName);
14ExpandedSubBlockEnd.gif      }

15InBlock.gif      else
16ExpandedSubBlockStart.gif      {
17InBlock.gif        file.SaveAs(Server.MapPath("./Others/"+ fileName);
18ExpandedSubBlockEnd.gif      }

19ExpandedSubBlockEnd.gif    }

20InBlock.gif    catch(Exception ex)
21ExpandedSubBlockStart.gif    {
22InBlock.gif      throw ex;
23ExpandedSubBlockEnd.gif    }

24ExpandedSubBlockEnd.gif  }

25ExpandedBlockEnd.gif}

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

  下一步我们将创建一个方法ShowMessages()用来显示上传的状态:

 
 1None.gifprivate void ShowMessage(string message, int fileUploadPos )
 2ExpandedBlockStart.gif{
 3InBlock.gif  if(fileUploadPos ==0)
 4ExpandedSubBlockStart.gif  {
 5InBlock.gif    Label1.Text = message;
 6ExpandedSubBlockEnd.gif  }

 7InBlock.gif  else
 8ExpandedSubBlockStart.gif  {
 9InBlock.gif    if(fileUploadPos ==1)
10ExpandedSubBlockStart.gif    {
11InBlock.gif      Label2.Text = message;
12ExpandedSubBlockEnd.gif    }

13InBlock.gif    else
14ExpandedSubBlockStart.gif    {
15InBlock.gif      Label3.Text = message;
16ExpandedSubBlockEnd.gif    }

17ExpandedSubBlockEnd.gif  }

18ExpandedBlockEnd.gif}

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

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

完整代码:
 1None.gifHttpFileCollection uploadFilCol = Request.Files;
 2None.giffor(int i=0;i<uploadFilCol.Count;i++)
 3ExpandedBlockStart.gif{
 4InBlock.gif  HttpPostedFile file = uploadFilCol[i];
 5InBlock.gif  string fileExt = Path.GetExtension(file.FileName).ToLower();
 6InBlock.gif  string fileName = Path.GetFileName(file.FileName);
 7InBlock.gif  if(fileName != string.Empty)
 8ExpandedSubBlockStart.gif  {
 9InBlock.gif    try
10ExpandedSubBlockStart.gif    {
11InBlock.gif      if(fileExt == ".jpg" || fileExt == ".gif")
12ExpandedSubBlockStart.gif      {
13InBlock.gif        file.SaveAs(Server.MapPath("./Images/"+ fileName);
14InBlock.gif        this.ShowMessage(" " + fileName + " Successfully Uploaded",i);
15ExpandedSubBlockEnd.gif      }

16InBlock.gif      else
17ExpandedSubBlockStart.gif      {
18InBlock.gif        file.SaveAs(Server.MapPath("./Others/"+ fileName);
19InBlock.gif        this.ShowMessage(" " + fileName + " Successfully Uploaded",i);
20ExpandedSubBlockEnd.gif      }

21ExpandedSubBlockEnd.gif    }

22InBlock.gif    catch(Exception ex)
23ExpandedSubBlockStart.gif    {
24InBlock.gif      this.ShowMessage(" " + ex.Message, i);
25ExpandedSubBlockEnd.gif    }

26ExpandedSubBlockEnd.gif  }

27ExpandedBlockEnd.gif}

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

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

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

总结:

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

本文转自网魂小兵博客园博客,原文链接:http://www.cnblogs.com/xdotnet/archive/2007/03/07/translate_upload_files_using_htmlfileinput.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章