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


Posted in Javascript onFebruary 03, 2016

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

Javascript 相关文章推荐
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 #Javascript
javascript鼠标右键菜单自定义效果
Dec 08 #Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 #Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 #Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 #Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 #Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP实现验证码校验功能
2017/11/16 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
植树节活动总结
2014/04/30 职场文书
消防安全宣传标语
2014/06/07 职场文书
教师节座谈会主持词
2015/07/03 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python