AngularJS向後端ASP.NET API控制器上傳檔案_AngularJS

本文執行個體介紹了前端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 url            method: "POST",            data: { fileUploadObj: $scope.fileUploadObj },            file: $file          }).progress(function (evt) {            // get upload percentage            console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));          }).success(function (data, status, headers, config) {            // file is uploaded successfully            console.log(data);          }).error(function (data, status, headers, config) {            // file failed to upload            console.log(data);          });        })(i);      }    }    $scope.abortUpload = function (index) {      $scope.upload[index].abort();    }  })

以上就是前端AngularJS向後端ASP.NET Web API上傳檔案的實現方法，希望對大家的學習有所協助。