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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
详解Javascript实践中的命令模式
May 05 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Django ORM filter() 的运用详解
2020/05/14 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
九年级物理教学反思
2014/01/29 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书