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 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
JavaScript变量声明详解
Nov 27 Javascript
jquery不常用方法汇总
Jul 26 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
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
我的论坛源代码(四)
2006/10/09 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
关于python中remove的一些坑小结
2021/01/04 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
党员组织关系介绍信
2014/02/13 职场文书
预备党员表决心书
2014/03/11 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
2014年教学工作总结
2014/11/13 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
退休欢送会致辞
2015/07/31 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
redis缓存存储Session原理机制
2021/11/20 Redis
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android