通过 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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/03336ad4638c3288fff04fe5981b58fc.html