AngularJS向后端ASP.NET API控制器上传文件

本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法，具体内容如下
首先服务端：

public class FilesController : ApiController{//using System.Web.Http[HttpPost]public async Task<HttpResponseMessage> Upload（）{if（！Request.Content.IsMimeMultipartContent（））{this.Request.CreateResponse（HttpStatusCode.UnsuportedMediaType）;}var provider = GetMultipartProvider（）;var result = await Request.Content.ReadAsMultipartAsync（provider）;//文件名类似"BodyPart_26d6abe1-3ae1-416a-9429-b35f15e6e5d5"这样的格式var originalFileName = GetDeserializedFileName（result.FileData.First（））;var uploadFileInfo = new FileInfo（result.FileData.First（）.LocalFileName）;//如果前端无表单数据，这里注销var filleUploadObj = GetFormData<UploadDataModel>（result）;var returnData = "ReturnTest";return this.Request.CreateResponse（HttpStatusCode.OK, new {returnData}）;}private MultipartFormDataStreamProvider GetMultipartProvider（）{//图片的上传路径var uploadFolder = "~/App_Data/FileUploads";//获取根路径var root = HttpContext.Current.Server.MapPath（uploadFolder）;//创建文件夹Directory.CreateDirectory（root）;return new MultipartFormDataStreamProvider（root）;}//从Provider中获取表单数据private object GetFormData<T>（MultipartFormDataStreamProvider result）{if（result.FormData.HasKeys（））{var unescapedFormData = Uri.UnescapeDataString（result.FormData.GetValues（0）.FirstOrDefault（） ?? String.Empty）;if（！String.IsNullOrEmpty（unescapedFormData））{return JsonConvert.DeserializeObject<T>（upescapedFormData）;}}return null;}//获取反序列化文件名private string GetDeserializedFileName（MultipartFileData fileData）{var fileName = GetFileName（fileData）;return JsonConvert.DeserializedObject（fileName）.ToString（）;}//获取文件名public string GetFileName（MultipartFileData fileData）{return fileData.Headers.ContentDisposition.FileName;}}

UploadDataModel.cs

public class UploadDataModel{public string testString1{get;set;}public string testString2{get;set;}}

客户端主页面：
index.html

<div ng-include=""upload.html""></div>

引用：

angular-file-upload-shim.js
angular.js
angular-file-upload.js
angular-cookies.js
angular-resource.js
angular-sanitize.js
angular-route.js
app.js
upload.js

upload.html部分视图页用来接受文件。
upload.html

<div ng-controller="UploadCtrl"<input type="file" ng-file-select="onFileSelect（$files）" multiple></div>

app.js模块依赖和全局配置。
app.js

"use strict"angular.module（"angularUploadApp",["ngCookies","ngResource","ngSanitize","ngRoute","angularFileUpload"]）.config（function（$routeProvider）{$routeProvider.when（"/", {templateUrl: "upload.html",controller: "UploadCtrl"}）.otherwise（{resirectTo: "/"}）}）

控制器提供上传和取消上传的方法。
upload.js

"use strict";angular.module（"angularUploadApp"）.controller（"UploadCtrl", function（$scope, $http, $timeout, $upload）{$scope.upload = [];$scope.fileUploadObj = {testString1: "Test ring 1", testString2: "Test string 2"};$scope.onFileSelect = function （$files） {//$files: an array of files selected, each file has name, size, and type.for （var i = 0; i < $files.length; i++） {var $file = $files[i];（function （index） {$scope.upload[index] = $upload.upload（{url: "./api/files/upload", // webapi urlmethod: "POST",data: { fileUploadObj: $scope.fileUploadObj },file: $file}）.progress（function （evt） {// get upload percentageconsole.log（"percent: " + parseInt（100.0 * evt.loaded / evt.total））;}）.success（function （data, status, headers, config） {// file is uploaded successfullyconsole.log（data）;}）.error（function （data, status, headers, config） {// file failed to uploadconsole.log（data）;}）;}）（i）;}}$scope.abortUpload = function （index） {$scope.upload[index].abort（）;}}）

以上就是前端AngularJS向后端ASP.NET Web API上传文件的实现方法，希望对大家的学习有所帮助。