这是什么?

如题所示,在这里我将展示一种使用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的控制器.

我发现网上大部分库都会遵循以下的方式

这种方式存在一个普遍的问题:每次修改文件,都将会上传文件到服务器.而之前上传的文件不会被删除.所以我不希望发生这样的事情,我认为你也不想.我将展示一种可以通过一次请求全部做完的方法.用户可以随意多次修改文件,当他们点击保存之后,模型将会发送到服务器.

为了实现功能,这里我会用到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

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):