首頁 web前端 js教程 AngularJS上傳至後端ASP.NET API控制器檔案_AngularJS

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

May 16, 2016 pm 03:16 PM
angularjs api asp.net 上傳文件

本文實例介紹了前端AngularJS向後端ASP.NET Web API上傳檔案的實作方法,具體內容如下

首先服務端:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

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() &#63;&#63; 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

1

2

3

4

5

6

public class UploadDataModel

{

  public string testString1{get;set;}

  public string testString2{get;set;}

}

登入後複製

客戶端主頁:

index.html

1

<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

1

2

3

<div ng-controller="UploadCtrl"

  <input type="file" ng-file-select="onFileSelect($files)" multiple>

</div>

登入後複製

app.js模組依賴和全域配置。

app.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

'use strict'

 

angular.module('angularUploadApp',[

  'ngCookies',

  'ngResource',

  'ngSanitize',

  'ngRoute',

  'angularFileUpload'

])

.config(function($routeProvider){

  $routeProvider

    .when('/', {

      templateUrl: 'upload.html',

      controller: 'UploadCtrl'

    })

    .otherwise({

      resirectTo: '/'

    })

})

登入後複製

控制器提供上傳和取消上傳的方法。

upload.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

'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上傳檔案的實作方法,希望對大家的學習有所幫助。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
123雲端碟怎麼上傳文件 123雲端碟怎麼上傳文件 Feb 24, 2024 pm 05:30 PM

123雲盤怎麼上傳文件?123雲盤中是可以上傳文件來儲存,但是多數的小夥伴不知道123雲盤如何上傳文件,接下來就是小編為玩家帶來的123雲盤上傳文件方法圖文教程,有興趣的用戶快來一起看看吧! 123雲盤怎麼上傳文件1、先打開123雲盤進入到主頁,註冊或登陸帳號;2、然後進入到如下圖所示的頁面,點擊箭頭指引的【上傳】按鈕;3、接著下方會展開功能列窗口,【選擇文件】功能點擊;4、最後選擇需要上傳的文件,耐心等待上傳完成即可。

如何在PHP專案中透過呼叫API介面來實現資料的爬取與處理? 如何在PHP專案中透過呼叫API介面來實現資料的爬取與處理? Sep 05, 2023 am 08:41 AM

如何在PHP專案中透過呼叫API介面來實現資料的爬取與處理?一、介紹在PHP專案中,我們經常需要爬取其他網站的數據,並對這些數據進行處理。而許多網站提供了API接口,我們可以透過呼叫這些接口來取得資料。本文將介紹如何使用PHP來呼叫API接口,實現資料的爬取與處理。二、取得API介面的URL和參數在開始之前,我們需要先取得目標API介面的URL以及所需的

Oracle API使用指南:探索資料介面技術 Oracle API使用指南:探索資料介面技術 Mar 07, 2024 am 11:12 AM

Oracle是一家全球知名的資料庫管理系統供應商,其API(ApplicationProgrammingInterface,應用程式介面)是一種強大的工具,可協助開發人員輕鬆地與Oracle資料庫互動和整合。在本文中,我們將深入探討OracleAPI的使用指南,向讀者展示如何在開發過程中利用資料介面技術,同時提供具體的程式碼範例。 1.Oracle

Oracle API整合策略解析:實現系統間無縫通信 Oracle API整合策略解析:實現系統間無縫通信 Mar 07, 2024 pm 10:09 PM

OracleAPI整合策略解析:實現系統間無縫通信,需要具體程式碼範例在當今數位化時代,企業內部系統之間需要相互通信和資料共享,而OracleAPI就是幫助實現系統間無縫通信的重要工具之一。本文將從OracleAPI的基本概念和原則入手,探討API整合的策略,最終給出具體的程式碼範例幫助讀者更好地理解和應用OracleAPI。一、OracleAPI基本

React API呼叫指南:如何與後端API互動和資料傳輸 React API呼叫指南:如何與後端API互動和資料傳輸 Sep 26, 2023 am 10:19 AM

ReactAPI呼叫指南:如何與後端API進行互動和資料傳輸概述:在現代的Web開發中,與後端API進行互動和資料傳輸是一個常見的需求。 React作為一個流行的前端框架,提供了一些強大的工具和功能來簡化這個過程。本文將介紹如何使用React來呼叫後端API,包括基本的GET和POST請求,並提供具體的程式碼範例。安裝所需的依賴:首先,確保在專案中安裝了Axi

開發建議:如何利用ThinkPHP框架進行API開發 開發建議:如何利用ThinkPHP框架進行API開發 Nov 22, 2023 pm 05:18 PM

開發建議:如何利用ThinkPHP框架進行API開發隨著網際網路的不斷發展,API(ApplicationProgrammingInterface)的重要性也日益凸顯。 API是不同應用程式之間進行通訊的橋樑,它可以實現資料共享、功能呼叫等操作,為開發者提供了相對簡單且快速的開發方式。而ThinkPHP框架作為一款優秀的PHP開發框架,具有高效能、可擴展且易用

如何處理Laravel API報錯問題 如何處理Laravel API報錯問題 Mar 06, 2024 pm 05:18 PM

標題:如何處理LaravelAPI報錯問題,需要具體程式碼範例在進行Laravel開發時,常會遇到API報錯的情況。這些報錯可​​能來自於程式碼邏輯錯誤、資料庫查詢問題或是外部API請求失敗等多種原因。如何處理這些報錯是一個關鍵的問題,本文將透過具體的程式碼範例來示範如何有效處理LaravelAPI報錯問題。 1.錯誤處理在Laravel

Insomnia教學:如何使用PHP API介面 Insomnia教學:如何使用PHP API介面 Jan 22, 2024 am 11:21 AM

PHPAPI介面:如何使用InsomniaInsomnia是一款功能強大的API測試和偵錯工具,它能夠幫助開發者快速、方便地測試和驗證API接口,支援多種程式語言和協議,其中包括PHP。本文將介紹如何使用Insomnia測試PHPAPI介面。第一步:安裝InsomniaInsomnia是一款跨平台的應用程序,支援Windows、MacOS和Linux等

See all articles