前端AngularJS后端ASP.NET Web API上传文件
本篇体验使用AngularJS向后端ASP.NET 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().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上传文件的更多相关文章
- ASP.NET Web API 上传文件
HTML表单: <form id="form1" method="post" enctype="multipart/form-data" ...
- 返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作
原文:返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, ...
- 演示如何通过 web api 上传文件MVC40
演示如何通过 web api 上传文件WebApiWebFormHost/UploadFileController.cs /* * 通过 web api 上传文件 */ using System; u ...
- C# Web Api 上传文件
一. 使用默认方法上传文件: 1.Action: /// <summary> /// 上传文件 使用上传后的默认文件名称 /// 默认名称是BodyPart_XXXXXX,BodyPart ...
- 1.5 WEB API 上传文件
1.前提,设置跨域 2.在控制器头添加允许跨域 /// <summary> /// 文件管理口控制器 /// </summary> [EnableCors("*&qu ...
- HttpClient 测试web API上传文件实例
1.使用HttpClient 测试上传文件并且设置header信息: using Lemon.Common; using Newtonsoft.Json; using System; using Sy ...
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤
在上一篇中实现了增删改查,本篇实现分页和过滤. 本系列包括: 1.前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2.前端使用AngularJS的$re ...
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
AngularJS中的$resource服务相比$http服务更适合与RESTful服务进行交互.本篇后端使用ASP.NET Web API, 前端使用$resource,实现增删改查. 本系列包括: ...
- Angularjs 通过asp.net web api认证登录
Angularjs 通过asp.net web api认证登录 Angularjs利用asp.net mvc提供的asp.net identity,membership实现居于数据库的用户名/密码的认 ...
随机推荐
- Python-css高级
1. 伪类和伪元素 1. 伪类 1. :link 2. :visited 3. :hover (重要) 4. :active 5. :focus(input标签获取光标焦点) 2. 伪元素 1. :f ...
- npm install 报错(npm ERR! errno -4048,Error: EPERM: operation not permitted,)解决方法
npm ERR! path E:\SouthernPowerGridProject\web_project\AutoOPS\autoops\node_modules\fsevents\node_mod ...
- CF126B
CF126B Password 题意: 给出一个字符串 H,找一个最长的字符串 h,使得它既作为前缀出现过.又作为后缀出现过.还作为中间的子串出现过. 解法: 沿着 $ next_n $ 枚举字符串, ...
- Python3-RabbitMQ 3.7.2学习——Hello World(二)
RabbitMQ环境搭建好了,接下来就是学习编程的入门级hello world. 在运行程序前,要先确保开启RabbitMQ服务 然后安装pika,命令:pip install pika 1.创建一个 ...
- OGNL(对象图导航语言)学习
一.关于OGNL(Object-Graph Navigation Language),一种可以方便地操作对象属性的开源表达式语言. 特点: 1)支持对象方法调用,形式如:objName.method ...
- 【APUE | 10】函数signal
函数signal 函数signal介绍 typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t ...
- 浅析C语言的变量
参考资料 寄存器变量 用register声明的变量是寄存器变量,是存放在CPU的寄存器里的.而我们平时声明的变量是存放在内存中的.虽说内存的速度已经很快了,不过跟寄存器比起来还是差得远. 寄存器变量和 ...
- 在Centos中安装aria2c
# 安装aria2c 1 安装epel源 rpm -ivh http://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm ...
- token登录验证机制图解
- bzoj2654
题解: 老早看的并没有写 wqs二分的原理和这个凸函数的性质已经证明过了 写的时候 主要的问题在于每次的答案是一个范围 什么意思呢 其实比较简单的做法是 优先取白边,优先取黑边做两次 然后看一下要求的 ...