AngularJS向后端ASP.NET API控制器上传文件  更新时间:2016年02月03日 14:41:30   作者:Darren Ji   这篇文章主要介绍了AngularJS向后端ASP.NET API控制器上传文件的相关资料,需要的朋友可以参考下 本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下 首先服务端: public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async Task 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(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(MultipartFormDataStreamProvider result) { if(result.FormData.HasKeys()) { var unescapedFormData = Uri.UnescapeDataString(result.FormData.GetValues(0).FirstOrDefault() ?? String.Empty); if(!String.IsNullOrEmpty(unescapedFormData)) { return JsonConvert.DeserializeObject(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 引用: 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" 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上传文件的实现方法,希望对大家的学习有所帮助。 您可能感兴趣的文章: 基于AngularJS的拖拽文件上传的实例代码 SpringMvc+Angularjs 实现多文件批量上传 AngularJS 文件上传控件 ng-file-upload详解 学习使用AngularJS文件上传控件 angularjs客户端实现压缩图片文件并上传实例 Angularjs上传文件组件flowjs功能 AngularJS ASP.NET API 上传文件 相关文章 angularJs利用$scope处理升降序的方法 今天小编就为大家分享一篇angularJs利用$scope处理升降序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angularjs之如何在跨域请求中传输Cookie的方法 跨域传输Cookie是需要后台和前台同时做相关处理才能解决的,这篇文章主要介绍了Angularjs之如何在跨域请求中传输Cookie的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-06-06 学习AngularJs:Directive指令用法(完整版) 这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 2016-04-04 angular内容投影详解 这篇文章主要为大家介绍了angular内容投影,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助 2021-12-12 angular2+nodejs实现图片上传功能 这篇文章主要介绍了angular2+nodejs实现图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-03-03 angular-cli修改端口号【angular2】 本篇文章主要介绍了angular2中angular-cli修改端口号的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧 2017-04-04 AngularJS之ionic 框架下实现 Localstorage本地存储 这篇文章主要介绍了AngularJS之ionic 框架下实现 Localstorage本地存储,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 AngularJS指令中的绑定策略实例分析 这篇文章主要介绍了AngularJS指令中的绑定策略,结合实例形式分析了scope绑定策略的分类与具体实现方法,需要的朋友可以参考下 2016-12-12 AngularJS入门教程之 XMLHttpRequest实例讲解 本文主要讲解 AngularJS XMLHttpRequest,这里给大家整理相关资料并提供实例代码,有需要的小伙伴参考下 2016-07-07 SeaJS 与 RequireJS 的差异对比 这篇文章主要介绍了SeaJS 与 RequireJS 的差异对比,本文主要对CMD规范和AMD规范的弊端做了对比,并做出了一个总结,需要的朋友可以参考下 2014-12-12 最新评论

本文实例介绍了前端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上传文件的实现方法,希望对大家的学习有所帮助。

您可能感兴趣的文章:

  • 基于AngularJS的拖拽文件上传的实例代码
  • SpringMvc+Angularjs 实现多文件批量上传
  • AngularJS 文件上传控件 ng-file-upload详解
  • 学习使用AngularJS文件上传控件
  • angularjs客户端实现压缩图片文件并上传实例
  • Angularjs上传文件组件flowjs功能
张贴在3