通過 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
</li> -
通過模型和url發送另外一個請求
</li> </ul>這種方式存在一個普遍的問題:每次修改文件,都將會上傳文件到服務器.而之前上傳的文件不會被刪除.所以我不希望發生這樣的事情,我認為你也不想.我將展示一種可以通過一次請求全部做完的方法.用戶可以隨意多次修改文件,當他們點擊保存之后,模型將會發送到服務器.
為了實現功能,這里我會用到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]); }); }); } }; }]);</pre>
至于這個模塊是什么,我會給你一個簡短的解釋,他有一個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); }這里我就介紹完了,以上,謝謝