ASP.NET MVC 3 - 通过 AngularJS 上传文件

Question

我在我的页面中使用AngularJS，我有一个疑问：当我使用我的表单发布时，如何将一些选定的文件传递给我的 ASP.NET MVC 3 控制器？ 看看这个：

我的表格：

<form enctype="multipart/form-data" ng-controller="FilesController" ng-submit="submitingForm()">
    <div>
        Choose the file:
        <input type="file" onchange="angular.element(this).scope().setSelectedFile(this)" />
    </div>

    <input type="submit" value="Confirm" />
</form>

还有 AngularJS 控制器：

var module = angular.module('application', []);

(function (ang, app) {

    function FilesController($scope, $http) {

        $scope.setSelectedFile = function (element) {
            $scope.$apply(function($scope) {
                $scope.selectedFile = element.files[0];
            });
        };

        $scope.submitingForm = function() {

            $http.post(url, ???????).success(function() {
                // How to pass that selected file for my ASP.NET controller?
            });
        }
    }

    app.controller("FilesController", FilesController);
})(angular, module);

谢谢！！！

Answer 1

我对 AngularJS 不是很熟悉，但是如果您尝试使用 AJAX 请求上传文件，您可能会忘记它。那不是可以做的事情。如果您想将文件异步上传到服务器，可以使用HTML5 File API。有一个专门用于此的entire section。

如果您的客户端浏览器不支持 HTML5 文件 API，您可以使用文件上传插件，例如 FineUploader 或 Uploadify（还有很多其他插件，只需 google）。

Answer 2

我的方法是使用FormData。

像这样创建一个输入标签。

<input id="imgInp" type="file" aria-label="Add photos to your post" class="upload" name="file" onchange="angular.element(this).scope().LoadFileData(this.files)" multiple="" accept="image/*" style="margin-top: -38px; opacity: 0; width: 28px;">

并在您的 Angular 控制器中创建一个方法 LoadFileData(inputFiles)，如下所示：

 var formData = new FormData();

 $scope.LoadFileData = function (files) {
        for (var file in files) {
            formData.append("file", files[file]);
        }
    };

现在在 formData 变量中，您将拥有上传的文件。只需将其发送到 asp.net mvc 控制器即可。

$scope.submit = function () {
        $http.post("/YourController/Method", formData, {
            withCredentials: true,
            headers: { 'Content-Type': undefined },
            transformRequest: angular.identity
        }).success(function (response) {
      }

在服务器端，Asp.NET MVC 4 控制器你将拥有文件

var files = Request.Files;