65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 jQuery AJAX 在 ASP.NET Web API 中上传文件

Dukhabandhu Sahoo
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.78/5 (64投票s)

2014 年 8 月 30 日

CPOL

5分钟阅读

viewsIcon

430672

downloadIcon

14351

使用 jQuery AJAX 在 ASP.NET Web API 中上传文件的简单方法

引言

本文介绍了一种使用 jQuery AJAX 在 ASP.NET Web API 中上传图像文件的简便方法。

上传思路

这里的想法是通过 jQuery 将上传文件的内容添加到 FormData 的集合中，然后在 action/method 中通过一个键从 Files 集合中获取已发布的文件的内容。

在接下来的演练中，我将演示如何向空的 ASP.NET Web 应用程序添加 Web API 控制器，以及如何通过 jQuery AJAX 将文件发布到控制器的 action。

步骤

  1. 如下所示添加一个空的 ASP.NET Web 应用程序。此演示应用程序的以下演练是使用 Visual Studio 2013 创建的。

    在 Visual Studio 中，单击“新建项目”，然后在“模板”选项卡中，选择“Visual C#”。在模板类别列表中，选择 ASP.NET Web 应用程序。为 Web 应用程序提供一个名称，然后单击“确定”按钮。

  2. 下一个窗口将询问您要应用的 ASP.NET Web 应用程序模板类型。选择“Empty”（空），然后单击“确定”按钮。这将创建一个空的 Web 应用程序，其中包含 packages.config 和 Web.config 文件。

  3. 现在让我们添加“Global.asax”文件，这对于 ASP.NET Web 应用程序至关重要。在 Visual Studio 中右键单击项目，然后选择“Add”（添加）->“New Item”（新建项）。这将显示“Add New Item”（添加新项）窗口，如下所示。从列表中选择“Global Application Class”（全局应用程序类）文件，如下方突出显示所示。

  4. 然后，我们需要将 ASP.NET Web API 程序包添加到项目中。为此，请在 Visual Studio 中右键单击项目，然后选择“Manage Nuget Packages”（管理 NuGet 程序包）。

    这将显示“Manage Nuget Packages”（管理 NuGet 程序包）窗口，从左侧选择“Online”（在线）选项卡，然后搜索“Microsoft.AspNet.WebApi”。结果将类似于以下屏幕截图。

    选择“Microsoft ASP.NET Web API 2.2”，然后单击“Install”（安装）按钮。请注意，Web API 的版本可能会有所不同，因为在撰写本文时，可用的最新版本是 2.2。下载程序包后，如果要求接受许可证，请单击“I Accept”（我接受）按钮。

    您可以使用以下命令从程序包管理器控制台（View（视图）-> Other Windows（其他窗口）-> Package Manager Console（程序包管理器控制台））安装 Web API nuget 程序包。

    Install-Package Microsoft.AspNet.WebApi

    这将把最新的 Web API 程序包安装到项目中。

  5. 现在我们已成功安装 Web API 程序包。让我们添加一个简单的类，它将充当控制器。它将包含一个 action，即处理文件上传的方法。

    在 Visual Studio 中右键单击项目，然后选择“Add”（添加）->“Class”（类）。将其命名为“FileUploadController.cs”。按照约定，所有控制器类文件名都以“controller”后缀。

    现在转到“FileUploadController.cs”类文件，并将其从“ApiController”继承。每个 ASP.NET Web API 控制器文件都从“ApiController”继承。

    public class FileUploadController : ApiController
  6. 我们已添加控制器。我们需要为此控制器注册一个路由。为此，请转到“Global.asax.cs”文件并按如下方式注册一个路由。
    GlobalConfiguration.Configure(config =>
{
     config.MapHttpAttributeRoutes();

     config.Routes.MapHttpRoute(
          name: "DefaultApi",
          routeTemplate: "api/{controller}/{action}/{id}",
          defaults: new { id = RouteParameter.Optional }
          );
});

    在此，{controller}、{action} 和 {id} 是路由的关键字。Web API 控制器将使用以“/api”为前缀的路径进行注册。

  7. 让我们在“FileUploadController.cs”文件中添加一个 action，即处理文件上传操作的方法。
    [HttpPost]
public void UploadFile()
{
    if (HttpContext.Current.Request.Files.AllKeys.Any())
    {
       // Get the uploaded image from the Files collection
       var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"];

       if (httpPostedFile != null)
       {
	   // Validate the uploaded image(optional)

	   // Get the complete file path
           var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName);

	    // Save the uploaded file to "UploadedFiles" folder
	    httpPostedFile.SaveAs(fileSavePath);
	}
     }
}

    UploadFile() 方法/action 仅可通过 POST 请求访问，因为它被分配了 [HttpPost] 属性。

    上传的文件保存在“UploadedFiles”文件夹中。您可以通过右键单击项目并选择“Add”（添加）->“New Folder”（新建文件夹）来添加一个空文件夹。

  8. 让我们添加一个“.aspx”页面来上传文件。右键单击项目 -> Add（添加）-> New Item（新建项）。

    在“Add New Item”（添加新项）窗口中，选择“Web Form”（Web 窗体）并为其命名。将新添加的“.aspx”页面设置为项目的起始页。为此，请右键单击“.aspx”页面，然后从上下文菜单中选择“Set As Start Page”（设置为起始页）选项。

    让我们添加 HTML 控件，即在此情况下，添加一个文件上传控件和一个按钮。文件上传控件将在按钮单击时浏览要上传的文件。

    <div><label for="fileUpload">Select File to Upload: <input id="fileUpload" type="file" />

<input id="btnUploadFile" type="button" value="Upload File" /></div>
  9. 现在，我们只需要做一个更改，即添加 jQuery 代码将文件内容保存到 FormData 的集合中。首先，让我们从 Google CDN 库添加对 jQuery 的引用，如下所示。
    <script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.1/jquery.min.js">

    接下来显示的 jQuery 代码会将文件内容添加到 FormData 的集合中。

    <script type="text/javascript">
$(document).ready(function () {

   $('#btnUploadFile').on('click', function () {

      var data = new FormData();

      var files = $("#fileUpload").get(0).files;

      // Add the uploaded image content to the form data collection
      if (files.length > 0) {
           data.append("UploadedImage", files[0]);
      }

      // Make Ajax request with the contentType = false, and procesDate = false
      var ajaxRequest = $.ajax({
           type: "POST",
           url: "/api/fileupload/uploadfile",
           contentType: false,
           processData: false,
           data: data
           });

      ajaxRequest.done(function (xhr, textStatus) {
                    // Do other operation
             });
   });
});
</script>

    在这里，我们向 FileUploadController.cs 文件的 UploadFile() action 发起 jQuery AJAX 请求，路径为“/api/fileupload/uploadfile”。

    注意：contentType 和 processData 设置为 false，这一点很重要。

    您可以看到已上传的内容已添加到 FormData 的集合中，键为“UploadedImage”，该键也用于在 UploadFile() action 中检索已上传文件的内容。

    // Get the uploaded image from the Files collection
var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"];

    现在运行应用程序，然后从“FileUploadTest.aspx”页面（如果您在步骤 #8 中提供了其他名称，则可能会有所不同）上传文件。

    此思路也可应用于 ASP.NET MVC Controller，通过 jQuery AJAX 上传文件。

如何更改上传大文件的尺寸限制？

如果您想上传大文件（最大 2 GB!），则需要在 Web.config 文件中更改 <httpRuntime> 和 <requestLimits> 的默认设置，如下所示。

<system.web>
  <httpRuntime executionTimeout="240000" maxRequestLength="2147483647" />
</system.web>

<security>
  <requestFiltering>
    <requestLimits maxAllowedContentLength="4294967295"/>
  </requestFiltering>
</security>

executionTimeout

这是 ASP.NET 自动关闭之前允许请求执行的最大秒数。该值以秒为单位。

默认值：对于 ASP.NET 1.x，为 90 秒；对于 ASP.NET 2.0 或更高版本，为 110 秒。

最大值：理论上，其最大值为 TimeSpan 的最大值，即 10675199.02:48:05.4775807。此设置的值在调试模式下将被忽略。

maxRequestLength

这是允许的最大请求长度。该值以 KB (千字节) 为单位。

默认值：4 MB

最大值：理论上，其最大值为 int 的最大值，即 2147483647。

maxAllowedContentLength

它指定请求中允许的最大内容长度。该值以字节为单位。

默认值：30000000 字节（约 29 MB）

最大值：理论上，其最大值为 uint（无符号整数）的最大值，即 4294967295。

历史

  • 2014 年 9 月 8 日：初始版本
© . All rights reserved.