通過 AngularJS 和 ASP.NET MVC5 實現文件上傳

這是什麼?

如題所示,在這裡我將展示一種使用Angular.js和ASP.NET MVC5 來實現上傳文件非常簡單的方法.

為什麼這樣做?

網上已經有很多庫實現這個功能了.而我的方法會有什麼特別之處呢?如果你已經意識到這個問題了,是非常酷的.思考一下為什麼我們會被這個問題一直困擾呢?

我們的要求非常簡單,我有一個模型,如下:

public class TutorialModel
{
public string Title { get; set; }
public string Description { get; set; }
public HttpPostedFileBase Attachment { get; set; }
}

我想在客戶端通過angular綁定一個模型,然後發送它到 ASP.NET MVC5的控制器.

我發現網上大部分庫都會遵循以下的方式

• 上傳文件-->保存-->在響應中返回文件的url
• 通過模型和url發送另外一個請求

這種方式存在一個普遍的問題:每次修改文件,都將會上傳文件到服務器.而之前上傳的文件不會被刪除.所以我不希望發生這樣的事情,我認為你也不想.我將展示一種可以通過一次請求全部做完的方法.用戶可以隨意多次修改文件,當他們點擊保存之後,模型將會發送到服務器.

為了實現功能,這裡我會用到HTML5的表單數據.我曾經為這個寫過一個分布式的angular模塊以便讓每個人都可以使用.讓我們來看看我的akFileUploader模塊.

"use strict"
angular.module("akFileUploader", [])
.factory("akFileUploaderService", ["$q", "$http",
function ($q, $http) {

var getModelAsFormData = function (data) {
var dataAsFormData = new FormData();
angular.forEach(data, function (value, key) {
dataAsFormData.append(key, value);
});
return dataAsFormData;
};

var saveModel = function (data,url) {
var deferred = $q.defer();
$http({
url: url,
method: "POST",
data: getModelAsFormData(data),
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
}).success(function (result) {
deferred.resolve(result);
}).error(function (result, status) {
deferred.reject(status);
});
return deferred.promise;
};

return {
saveModel: saveModel
}

}])
.directive("akFileModel", ["$parse",
function ($parse) {
return {
restrict: "A",
link: function (scope, element, attrs) {
var model = $parse(attrs.akFileModel);
var modelSetter = model.assign;
element.bind("change", function () {
scope.$apply(function () {
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);

至於這個模塊是什麼,我會給你一個簡短的解釋,他有一個directive(指令)和一個Factory.

akFileModel的指令: 他能響應式的為modelSetter改變文件和隱藏文件.

akFileUploader的服務: 它主要是創建一個表單數據和通過$http發送所需的URL.

使用MVC框架

application.js

"use strict";
(function () {
angular.module("application", ["ngRoute", "akFileUploader"]);
})();

template

<form class="form-horizontal">
<h4>Tutorial</h4>
<hr />
<div class="form-group">
<label for="title" class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<input type="text" data-ng-model="tutorial.title" name="title" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="description" class="col-md-2 control-label">Description</label>
<div class="col-md-10">
<textarea data-ng-model="tutorial.description" name="description" class="form-control">
</textarea>
</div>
</div>
<div class="form-group">
<label for="attachment" class="col-md-2 control-label">Attachment</label>
<div class="col-md-10">
<input type="file" name="attachment" class="form-control" data-ak-file-model="tutorial.attachment" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" class="btn btn-primary" value="Save" data-ng-click="saveTutorial(tutorial)" />
</div>
</div>
</form>

service:

"use strict";
(function () {
angular.module("application")
.factory("entityService", ["akFileUploaderService", function (akFileUploaderService) {
var saveTutorial = function (tutorial) {
return akFileUploaderService.saveModel(tutorial, "/controllerName/actionName");
};
return {
saveTutorial: saveTutorial
};
}]);
})();

controller(js):

"use strict";
(function () {
angular.module("application")
.controller("homeCtrl", ["$scope", "entityService",
function ($scope, entityService) {
$scope.saveTutorial = function (tutorial) {
entityService.saveTutorial(tutorial)
.then(function (data) {
console.log(data);
});
};
}]);
})();

MVC Controller Action:

[HttpPost]
public ActionResult SaveTutorial(TutorialModel tutorial)
{
return Json("Tutorial Saved",JsonRequestBehavior.AllowGet);
}

這裡我就介紹完了,以上,謝謝

AngularJS權威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡，並分享我的工作~帶你走近AngularJS系列：

1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡