国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 10:37:14
字體:
來源:轉載
供稿:網友

本文實例介紹了前端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上傳文件的實現方法,希望對大家的學習有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 巴东县| 汉中市| 尼木县| 平顺县| 正宁县| 旬邑县| 奉贤区| 荔浦县| 玛纳斯县| 吴桥县| 阿瓦提县| 谢通门县| 会东县| 咸丰县| 岳普湖县| 内乡县| 马山县| 海城市| 高雄县| 弥勒县| 宽甸| 云阳县| 尼木县| 德清县| 灵台县| 开平市| 门头沟区| 柳江县| 琼海市| 东乡县| 定结县| 巴彦淖尔市| 恩施市| 桐柏县| 凤山县| 靖安县| 舟曲县| 鹤岗市| 万源市| 集安市| 九龙县|