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 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
php自动跳转中英文页面
2008/07/29 PHP
php解决约瑟夫环示例
2014/04/09 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
eval的两组性能测试数据
2012/08/17 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
面试常见的js算法题
2017/03/23 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
使用graphics.py实现2048小游戏
2015/03/10 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
家电业务员岗位职责
2014/03/10 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
关于安全演讲稿
2014/05/09 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
标枪加油稿
2015/07/22 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
用Python生成会跳舞的美女
2022/01/18 Python