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 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
python将ansible配置转为json格式实例代码
2017/05/15 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
python初步实现word2vec操作
2020/06/09 Python
python实现经纬度采样的示例代码
2020/12/10 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
销售部主管岗位职责
2013/12/18 职场文书
采购部主管岗位职责
2014/01/01 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2014年检验科工作总结
2014/11/22 职场文书
生产现场禁烟通知
2015/04/23 职场文书
入团介绍人意见范文
2015/06/04 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL