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事件绑定.on()简要概述及应用
Feb 07 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
封装属于自己的JS组件
Jan 27 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
js随机生成一个验证码
Jun 01 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
php实现微信支付之企业付款
2018/05/30 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
JQuery球队选择实例
2015/05/18 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
python模块smtplib学习
2018/05/22 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
python 字符串常用函数详解
2019/09/11 Python
使用python制作一个解压缩软件
2019/11/13 Python
电子信息工程专业求职信
2014/06/28 职场文书
2014年消防工作总结
2014/11/21 职场文书
新郎接新娘保证书
2015/05/08 职场文书
运动会800米赞词
2015/07/22 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python