这是什么?

如题所示,在这里我将展示一种使用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);          }

这里我就介绍完了,以上,谢谢