如何使用angular js将上传的文件内容传递给控制器​​中的HttpPostedFileBase类型

Question

我正在使用angularjs开发一个asp.net mvc4应用程序。我想提供一个选择文件选项以及一些表单数据。通过引用一些链接，我提供了一个选择文件选项但现在的问题是我无法将上传的文件内容传递给控制器​​，我试图将文件的路径存储到数据库中。

以下是我的.cshtml页面...

  <div ng-app="formapp">
      <div ng-controller="FormController">
           <form name="myform" ng-submit="submit(myform.$valid)" novalidate>
                <div class="form-group">
                     <p class="bg-text">User Name</p>
                   <div class="input-group">
                        <input id="username" class="form-control" type="text" name="username" ng-      model="username" placeholder="Username" required />
                        <span class="help-inline" ng-show="(myform.username.$dirty || submitted) && myform.username.$error.required">UserName is required</span>
                   </div>
               </div>
              <div class="form-group">
                 <p class="bg-text">Choose file</p>
                 <div class="input-group">
                     <input type="file" ng-file-select="onFileSelect($files)" name="file" />
                 </div>
              </div>

              <button type="submit" ng-click="submitted=true" class="btn btn-primary">Sign Up</button>
              <button type="reset" class="btn btn-warning">Reset</button>
          </form>
     </div>
</div>

脚本部分如下......

<script>

var formapp = angular.module('formapp', ['ui.bootstrap', 'angularFileUpload']);
formapp.controller('FormController', function ($scope, $http, $upload) {  

    $scope.selectedFile = [];
    $scope.uploadProgress = 0;


    $scope.onFileSelect = function ($files) {
        $scope.uploadProgress = 0;
        $scope.selectedFile = $files;
    };

    $scope.submit = function (isValid) {

          $scope.object = {              
              UserName: $scope.username,              
          };

          var file = $scope.selectedFile[0];

          var request = $http({
                  method: "post",
                  url: "/Admin/SaveUser",
                  data: $scope.object,
                  file:file
              }).success(function (data) {
                  if (data.success)
                      window.location.href = data.Url;
                  else {
                      alert(data.message);
                      $scope.username = "";
                      $scope.EmployeeDetailId = "";
                  }
              }).error(function (data) {
                        window.location.href = data.Url;
                    });
          }
      }
});
</script>

以下是我的控制器......

public ActionResult SaveUser(RegisteredUser data, HttpPostedFileBase file)
{
      string ImageName = Path.GetFileName(file.FileName);
      string physicalPath = Server.MapPath("~/Pictures/" + ImageName);
      data.picture = System.Text.Encoding.UTF8.GetBytes(physicalPath);
      db.RegisteredUsers.Add(data);
      db.SaveChanges();
 }

问题：

HttpPostedFileBase总是在控制器上返回null但是当我调试cshtml页面时，我能够看到＆＃39;文件＆＃39;参数包含上传数据的所有内容。

我犯了错误，请帮我解决这个问题...

Answer 1

在HTML5之前，没有办法通过AJAX发送文件。使用HTML5，如果要执行此操作，必须先使用File API读取文件数据，然后手动将文件内容放入POST对象中。您仍然无法对表单进行序列化并将其称为日期。此外，由于这只是HTML5，因此通常需要注意。除了现代浏览器（例如IE10 +）之外，它不会在任何工作中工作。如果你仍然需要支持IE7或IE8，那么你就不能这样做了。相反，您需要使用一些Flash或Java组件来上传文件。有大量不同的图书馆;只是做一个搜索。