发布于 2017-02-17 02:25:50 | 135 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的AngularJS开发指南，程序狗速度看过来！
AngularJS 前端JS框架
AngularJS诞生于Google是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。
本文实例介绍了前端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>引用：
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上传文件的实现方法，希望对大家的学习有所帮助。