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

zoukankan html css js c++ java

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

1<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false"
2Inherits="MultipleUpload.WebForm1" %>
3<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
4<HTML>
5  <HEAD>
6    <title>WebForm1</title>
7    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET
8
97.1">
10    <meta name="CODE_LANGUAGE" Content="C#">
11    <meta name="vs_defaultClientScript" content="JavaScript">
12    <meta name="vs_targetSchema"
13    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来判断文件的扩展名以及文件名，我们将通过扩展名来将文件分成两类。

1HttpFileCollection uploadFilCol = Request.Files;
2for(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（）用来显示上传的状态：

1private 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的集合索引。

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

完整代码：

1HttpFileCollection uploadFilCol = Request.Files;
2for(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

关于作者：网魂小兵

文章出处：http://xdotnet.cnblogs.com

本文可以随意转载，摘抄等非商业用途。

为了尊重作者成果，在转载和摘抄的时候请留下作者名称和出处。

查看全文

相关阅读:
微信小程序开发微信开发者工具快捷键
 .NET 4.0 任务(Task)
MVC UpdateModel的未能更新XXXXX的类型模型
 ORACLE 定时执行存储过程
 DotNet 资源大全中文版（Awesome最新版）
基于SignalR实现B/S系统对windows服务运行状态的监测
 Method not found: '!!0[] System.Array.Empty()'.
MVC-RedirectToAction跳转到其他Area
C# where用法
 C#委托的介绍(delegate、Action、Func、predicate)

原文地址：https://www.cnblogs.com/xdotnet/p/translate_upload_files_using_htmlfileinput.html